在模板中綁定表達式是非常方便的,但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 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 再呼叫方法。
自訂的Watcher
雖然計算屬性在大多數情況下是非常合適的,但是有的時候也需要自訂一個watcher。這是因為你想要在資料變化回應的時候,執行非同步操作胡總和其他的操作是非常有用的
以上就是Vue.js計算屬性computed與watch,更多先關內容請關注PHP中文網(www .php.cn)!