在模板中綁定表達式是非常便利的,但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯,應當使用**計算屬性**。
Vue實例的computed的屬性
<div class="test"> <p>原始的信息{{message}}</p> <p>計算後的信息{{ComputedMessage}}</p> </div>
js代碼
var myVue = new Vue({ el: ".test", data: { message:12 }, computed:{ ComputedMessage:function () { return this.message+10; } } });
界面會顯示 12 和 22
上述的方式是一種緩沖的實現的效果,這種實現的方式依賴於它的緩寸,計算得到的屬性只有在相關依賴(message)改變的時候才會重新取值,這就意味著只要message沒有發生改變的時候,多次訪問ComputedMessage都不會再重新執行計算的這個屬性。。
計算後的ComputedMessage屬性始終是依賴於message的
通過調用函數實現同樣的效果
<div class="test"> <p>原始的信息{{message}}</p> <p>計算後的信息{{MessageFunction()}}</p> </div>
js代碼
var myVue = new Vue({ el: ".test", data: { message:12 }, methods:{ MessageFunction:function () { return this.message+10; } } });
得到的結果和上面的結果是一樣的,但是每次被重新渲染的時候都會被重新調用。
所以使用上述兩種方式的時候,首先要確定你是否需要借助緩存
使用vue實例的watch
這個沒有看懂呀
但是使用computed這個屬性更加的方便和快捷
<div class="test"> <p>原始的信息{{fullName}}</p> </div>
js代碼
var myVue = new Vue({ el: ".test", data: { firstName:"fur", lastName:"bool" }, computed:{ fullName:function () { return this.firstName+this.lastName } } });
而且你可以computed屬性設置setter getter是默認就有的。
演示set和get的調用過程
<div class="test"> <p>原始的信息{{fullName}}</p> <button @click="fu">test</button> </div>
js代碼
var myVue = new Vue({ el: ".test", data: { firstName:"fur", lastName:"bool", fullName:"sasas dsdsd dsds" }, computed:{ fullName:{ get:function () { console.log("get") return this.firstName+this.lastName }, set:function(value){ var names=value.split(" "); this.firstName=names[0]; this.lastName=names[names.length-1]; console.log("set"); } } }, methods:{ fu:function () { myVue.fullName="sasas dsdsd dsds"; console.log(myVue.firstName); //sasas console.log(myVue.lastName); //dsds } } });
首先會輸出get;
在點擊按鈕為fullName賦值的時候首先調用set 再調用get方法。
自定義的Watcher
雖然計算屬性在大多數情況下是非常合適的,但是有的時候也需要自定義一個watcher。這是因為你想要在數據變化響應的時候,執行異步操作胡總和其他的操作是非常有用的。