1.偵聽器
Vue 通過 watch 選項提供了一個更通用的方法,來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時,這個方式是最有用的。
watch監聽的是單個屬性
基本數據類型:簡單監聽
<div id="app">
<input type="text" v-model="msg" />
<h2>{{msg}}</h2>
</div>
<script>
new Vue({
el:'#app',
data(){
return{
msg : ""
}
},
watch:{
msg : function(newV,oldV){
console.log(newV,oldV);
}
}
})
</script>
複雜數據類型:深度監聽
<div id="app">
<div>
<p>obj.a: {{obj.a}}</p>
<p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
obj: {a: 123}
},
watch: {
obj: {
deep : true,
handler(newV, oldV) {
console.log('obj.a changed');
},
}
}
})
</script>
2.計算屬性
對於任何複雜邏輯,你都應當使用計算屬性
<div id="app"></div>
<script>
var vm = new Vue({
el : '#app',
template : `
<div>
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
`,
data : function () {
return {
message : "hello"
}
},
computed : {
reversedMessage : function(){
return this.message.split('').reverse().join('')
}
}
})
</script>
我們可以將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而,不同的是計算屬性是基於它們的依賴進行緩存的。只在相關依賴發生改變時它們纔會重新求值。這就意味着只要 message 還沒有發生改變,多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果,而不必再次執行函數。
相比之下,每當觸發重新渲染時,調用方法將總會再次執行函數。
我們爲什麼需要緩存?假設我們有一個性能開銷比較大的計算屬性 A,它需要遍歷一個巨大的數組並做大量的計算。然後我們可能有其他的計算屬性依賴於
A 。如果沒有緩存,我們將不可避免的多次執行 A 的 getter!如果你不希望有緩存,請用方法來替代。