16Vue - 計算屬性（基礎例子)

在模板中綁定表達式是很是便利的，可是它們實際上只用於簡單的操做。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：

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

在這種狀況下，模板再也不簡單和清晰。在實現反向顯示 message 以前，你應該確認它。這個問題在你不止一次反向顯示 message 的時候變得更加糟糕。

這就是爲何任何複雜邏輯，你都應當使用計算屬性。

基礎例子

HTML：

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

JS：

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 是乾淨無反作用的，所以也是易於測試和理解的。