【vue】計算屬性和偵聽器

當你有一些資料需要随着其它資料變動而變動時，你很容易濫用 

watch

<div id="demo">{{ fullName }}</div>
           

watch版本：

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
    }
  }
})
           

Computed版本：

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

雖然計算屬性在大多數情況下更合适，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 

watch

 選項提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的。

轉自官網執行個體：https://cn.vuejs.org/v2/guide/computed.html