vue2計算屬性computed

詳見vue2.0 API《計算屬性》

需求：

模板內的表達式是非常便利的，但是它們實際上只用於簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

<div id="example">

{{ message.split('').reverse().join('') }}

</div>

在這種情況下，模板不再簡單和清晰。在意識到這是反向顯示 message 之前，你不得不再次確認第二遍。當你想要在模板中多次反向顯示 message 的時候，問題會變得更糟糕。

這就是對於任何復雜邏輯，你都應當使用計算屬性的原因。

基礎例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

結果：

Original message: "Hello"

Computed reversed message: "olleH"

這里我們聲明了一個計算屬性 reversedMessage 。我們提供的函數將用作屬性 vm.reversedMessage 的 getter 。

console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

你可以打開瀏覽器的控制台，自行修改例子中的 vm 。 vm.reversedMessage 的值始終取決於 vm.message 的值。

你可以像綁定普通屬性一樣在模板中綁定計算屬性。 Vue 知道 vm.reversedMessage 依賴於 vm.message ，因此當 vm.message 發生改變時，所有依賴於 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系：計算屬性的 getter 是沒有副作用，這使得它易於測試和推理。