本文為大家分享了Vue計算屬性的學習筆記，供大家參考，具體內容如下

①模板內的表達式實際上只用于簡單的運算，對于復雜邏輯，使用計算機屬性。

②基礎例子：

<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:{  //a computed getter  reversedMessage:function(){   //'this' points to the vm instance   return this.message.split('').reverse().join('')  }  } }) 

這里我們聲明了一個計算機屬性reversedMessage，我們提供的函數將用作屬性vm.reversedMessage的getter。

③計算機緩存 vs Methods

可以通過調用表達式中的method來達到同樣的效果：

<p>Reversed message:"{{reversedMessage}}"</p> 

//in component methods:{  reversedMessage:function(){  return this.message.split('').reverse()/join('')  } } 

可以將同一個函數定義為一個method而不是一個計算機屬性。對于最終的結果，兩種方式確實是相同的。然而不同的計算機屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值，這就意味著只要message還沒有改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。
下面的計算屬性將不再更新，因為Date.now()不是響應式依賴：

computed:{  now:function(){  return Date.now()  } } 

只要發生重新渲染，method調用總會執行該函數。

④computed屬性 vs 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  }  } }) 

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