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