首頁  >  文章  >  web前端  >  Vue.js計算屬性computed與watch(5)

Vue.js計算屬性computed與watch(5)

黄舟
黄舟原創
2016-12-13 16:33:441124瀏覽

在模板中綁定表達式是非常方便的,但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 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)!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn