29.Vue計算屬性

什麼是計算屬性：

在模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護，所以，對於任何複雜邏輯，你都應當使用計算屬性。

計算屬性和方法區別：

儘管使用方法也能實現計算屬性相同效果，但最明顯的區別在於：計算屬性是基於它們的依賴進行緩存的，只有相關依賴發生改變時它們纔會重新求值。

案例：

<template>
  <div>
      {{messageCmp}}  <br/>
      <button @click="mclick">點擊</button> <br/> <br/>
      {{message2Cmp}}
  </div>
</template>
<script>
export default {
  data(){
    return {
        message: '123,456,789'
    }
  },
  // 計算屬性
  computed: {
    messageCmp(){
      console.log('messageCmp 被執行!');
      return this.message.split(',').reverse().join(','); //反轉message值
    },
    // 提供 get set方法
    message2Cmp: {
      get(){
        console.log('message2Cmp get被執行!');
        return this.message2 += ' hello';
      },
      set(val){
         console.log('message2Cmp set被執行!');
         this.message = val;
      }
    }
  },
  methods: {
    mclick(){
       this.message = 'aa,bb,cc';
       this.message2Cmp = 'hello message2';
      console.log(this.message2Cmp );
    }
  }
  mounted(){}
}
</script>

一般情況下，計算屬性不會使用到set，直接默認get ( messageCmp )方式返回處理後的值。