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

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

1.計算屬性

<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: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  },
methods: { //每當觸發(fā)重新渲染時，調(diào)用方法將總會再次執(zhí)行函數(shù)
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
})
//Original message: "Hello"
//Computed reversed message: "olleH"
//vm.reversedMessage 的值始終取決于 vm.message 的值。
//計算屬性是基于它們的響應(yīng)式依賴進行緩存的,只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值

假設(shè)我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數(shù)組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用方法來替代。

2.計算屬性的 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]
    }
  }
}

3.監(jiān)聽器

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

當你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用 watch,不如用computed

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})