摘要:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
模板內的表達式是非常便利的,但是他們實際上只用于簡答的運算;在模板上放有太多的邏輯會讓模板過重難以維護;這就是對于任何復雜的邏輯,你都應該使用計算屬性的原因;
接下來我們將computed屬性與methods? watch屬性進行一些簡單的比較;
1:computed屬性;
經過處理返回的數據值,只要源數據沒有發生改變,computed函數里面對相應的數據就不會反生改變,相當于緩存在本地;發生改變的時候,computed對應數據的函數也會發生改變;
在這里我們聲明一個計算屬性reversedMessage;我們提供的函數將作為屬性vm.reb=versedMessage的getter.
console.log(vm.reversedMessage);
vm.message="Goodbye";
console.log(vm.reversedMessage);
你可以打開瀏覽器的控制臺,自行修改;
HTML部分
origonal message:"{{message}}"
Computed reversed message:"{{reversedMessage}}"
{{now}}
js部分
var vm=new Vue({
el:"#example",//定義作用域
data:{
message:"hello"http://存放全局數據;
},
computed:{
//a computed getter ---computed中具有get屬性
reversedMessage:function(){
return this.message.split("").reverse().join("");
},//對應上面的reversedMessage屬性
now:function(){
return Date.now();
}//Vue提供獲取時間的方法---對上面個的now變量;
}
});
2:computed屬性和methods屬性
你可能已經注意到我們可以通過調用method來達到同樣的效果:
我們可以將同一個函數定義為一個method而不是一個計算屬性,對于最終的結果,兩種方式確實是相同的,
然而,計算屬性是基于他們的依賴就行緩存的,計算屬性只有在它相關的依賴發生改變時才會重新求值,這意味著只要message 還沒有發生改變,多次訪問reversedMessage計算屬性會立刻返回之前計劃算的結果,而不必再次執行函數.這也同樣意味著下面的計算屬性將不再更新,
相比而言,只要發生重新渲染,method調用總會執行該函數;
我們為什么需要緩存?假設我們有一個性能開銷比較大的計劃屬性A,
它需要便利一個極大的數組和做很大量的計算,然后我們可能尤其他的計算屬性依賴A,
如果沒有緩存,我們將不可避免的多次執行A的geteer,如果你不希望有緩存,請用methods代替;
因為Date.now()不是響應式依賴;
HTML部分
Reversed message :"{{reversedMessage()}}"
js部分
methods:{
reversedMessage:function(){
return this.message.split("").reverse().join('');
}
};
3:computed屬性與watch屬性;
vue確實提供了一種更通用的一種方式來觀察和響應Vue實例上的數據變動:watch屬性;當你有一些數據需要隨著其他數據進行便動,你會很容易濫用watch--特別是你之前使用過AngularJS.然后,通常更好的想法就是使用computed屬性而不是命令式的watch回調
- 就直接寫兩這個JS部分代碼的比較吧;
通過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",
fullName:"foo Bar"
},
computed:{
fullName:function(){
get:function(){
return this.firstName+" "+this.lastName;
}
}
}
});
通過比較,computed的優勢就出來了;
4:computed中的屬性;
計算屬性默認只有getter不過在需要時也可以提供一個setter;
var vm=new Vue({
el:"#demo",
data:{
firstName:"foo",
lastName:"Bar",
fullName:"foo Bar"
},
computed:{
fullName:function(){
get:function(){
return this.firstName+" "+this.lastName;
},
setter:function(){
var names=newValue.split('');
this.firstName=names[0];
this.lastName=names[names.length-1]
}
}
}
});
