Vue.js計算屬性computed與watch（5）

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