VUE中的計算屬性

模版插入變量／表達式

實例代碼：

<div id="example">
  {{ message }}
  {{ message.split('').reverse().join('') }}
</div>

其中經過{{...}}語法插入響應數據，可是隻適用於簡單的數值如{{ message }}，而message.split('').reverse().join('')更適合做爲一個計算屬性插入。

計算屬性

計算屬性的getter

實例代碼：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessageComputed }}"</p>
  <button @click="doSomething">aaa</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessageComputed: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
     doSomething: function(){
        this.message = 'Message';
     }
  }   
})

其中reversedMessage做爲一個計算屬性，其返回值始終取決於vm.message，當點擊aaa按鈕，將vm.message改成‘Message’時相應的reversedMessage返回值也會改變。

計算屬性的setter

計算屬性默認只有 getter ，不過在須要時也能夠提供一個 setter。例子以下：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

在運行vm.fullName = ' Summer Wang'時，setter被調用.

計算屬性 VS 方法

方法

上述例子爲使用計算屬性顯示message的reverse值，實際上方法也能夠達到一樣的效果，實現以下：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessageMethod() }}"</p>
  <button @click="doSomething">aaa</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
     doSomething: function(){
        this.message = 'Message';
     },
    reversedMessageMethod: function () {
      return this.message.split('').reverse().join('')
    }
  }   
})

將reversedMessage定義爲方法，使用{{ reversedMessage() }}的方式插入到html中，此時點擊aaa按鈕reversedMessage也會響應的改變。

計算屬性 和 方法 的區別

計算屬性是基於它們的依賴進行緩存的，也就是說只有其依賴發生變化時計算屬性纔會從新計算，只有message變化時reversedMessageComputed纔會從新計算，若是message沒有變化那麼reversedMessageComputed始終返回以前計算的結果，並不會從新計算一次。

而方法reversedMessageMethod，每當觸發從新渲染時，reversedMessageMethod將總會再次執行函數。 例子：

<div id="app-7">
    <p>Original message: "{{ message }}"</p>
    <p>Computed Date: "{{ getDateComputed }}"</p>
    <button @click="getDateMethod">aaa</button>
</div>
var app7 = new Vue({
    el: '#app-7',
    data: {
        message: 'Hello'
    },
    computed: {
        // 計算屬性的 getter
        getDateComputed: function () {
            return Date.now();
        }
    },
    methods: {
        getDateMethod: function () {
            this.message = Date.now();
        }
    }
});

當點擊aaa按鈕時，Computed Date後面的數值不會改變，而message的值會改變，是由於getDateComputed並無從新執行，而是返回了上次執行後的緩存值。而getDateMethod從新執行了。

偵聽屬性

寫在watch中，用於監聽一些數據的變化。例如：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    //監聽firstName的變化
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    //監聽lastName的變化
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

一般對於數據監聽最好的作法是使用計算屬性而不是watch回調。