Vue中的計算屬性與$watch

計算屬性：在模板中綁定表達式是很是便利的，可是他們實際上只用於簡單的操做。模板是爲了描述視圖的結構。在模板中放入太多的邏輯會讓模板太重且難以維護。這就是爲何vue.js將綁定表達式限制爲一個表達式。若是須要多於一個表達式的邏輯，應當使用計算屬性。

<div id="box">
    a={{a}},b={{b}}
</div>

new Vue({
  data:{
    a:1
  },
  computed:{
    b:function(){
      return this.a + 1
    }
  }
}).$mount("#box");

 

這裏咱們聲明瞭一個計算屬性b。咱們提供的函數將用做屬性vm.b的getter

你能夠打開瀏覽器的控制檯，修改 vm。vm.b 的值始終取決於 vm.a 的值。

你能夠像綁定普通屬性同樣在模板中綁定計算屬性。Vue 知道 vm.b 依賴於vm.a，所以當vm.a 發生改變時，依賴於 vm.b 的綁定也會更新。並且最妙的是咱們是聲明式地建立這種依賴關係：計算屬性的 getter 是乾淨無反作用的，所以也是易於測試和理解的。

計算屬性 vs. $watch

計算屬性 vs. $watch

計算屬性 vs. $watch

Vue.js 提供了一個方法 $watch，它用於觀察 Vue 實例上的數據變更。當一些數據須要根據其它數據變化時， $watch很誘人 —— 特別是若是你來自 Angularjs。不過，一般更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調。考慮下面例子：

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

var vm=new Vue({
  el:"#box",
  data:{
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
});
//使用$watch
vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
});

 

上面代碼是命令式的重複的。跟計算屬性對比：

 

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

這樣更好，不是嗎？

計算 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]
    }
  }
}
// ...

如今在調用 vm.fullName = ‘John Doe’ 時，setter 會被調用，vm.firstName 和vm.lastName 也會有相應更新。

關於計算屬性背後的原理和技術細節詳見計算屬性的奧祕。

總結 ：

計算屬性：用於簡單場合，好比計算，合併字符串等；

watch屬性：用於耗時的，能夠異步的獲取遠程服務上的數據這樣的操做。

參考資料：

http://cn.vuejs.org/v2/guide/reactivity.html#main

http://cn.vuejs.org/v2/guide/computed.html

https://github.com/zuobaiquan/Vue/tree/master/01vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86