總結 vue data、計算屬性 computed 與偵聽屬性 watch

data

當一個 Vue 實例被建立時，它將 data 對象中的全部的屬性加入到 Vue 的響應式系統中。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。（只有在實例化的data會產生「響應」，然後期加入的屬性則不會產生「響應」）

如何在實例化以後中止對數據的響應（Object.freeze（））

例：

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

data 爲何要使用 return 返回對象的方式呢？

由於不使用return包裹的數據會在項目的全局可見，會形成變量污染。 使用return包裹後數據中變量只在當前組件中生效，不會影響其餘組件。

computed

模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。對於任何複雜邏輯，你都應當使用計算屬性。

計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會從新求值。(也就是說只有當依賴的屬性發生變化時才纔會從新計算這個計算屬性)

計算屬性默認只有 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]
    }
  }
}

watch

雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。

computed 與 watch 的區別在於，前者是在依賴的屬性發生改變時觸發回調函數，後者則是在屬性自己發生改變時觸發回調函數。