Vue中可以使用監聽器監聽屬性的變化，並根據屬性變化作出響應。但一旦涉及到複雜數據的監聽（如Object，但數組一般不需要，因爲Vue針對數組做了特殊處理）時就比較複雜了，本文解釋了使用watch監聽屬性變化的方法，包括複雜數據。
基本用法
Vue watch最重要的使用場景是根據某屬性的變化執行某些業務邏輯:
<template>
<input type="number" v-model.number="counter" />
</template>
<script>
export default {
name: "Counter",
data: function() {
return {
counter: 0,
};
},
watch: {
counter: function(newV, oldV) {
console.log('counter change to %d from %d', newV, oldV);
},
}
};
</script>
watch的基本用法很簡單：針對需要監聽的屬性定義個同名的函數即可，函數的第一個參數爲變化後的值，第二個參數爲變化前的值。
監聽object
首先我們回顧一個JavaScript中的概念：複雜數據變量。“複雜”的原因在於變量只是一個引用，和C++中的指針類似，其保存的不是真實的數據，而是數據的地址。比如對於一個object變量來說，添加屬性、刪除屬性、修改屬性的值都不會改變這個地址，這也可以說這個object變量沒有變化。不管所用的框架如何，基本定理肯定是生效的，所以Vue中監聽object也是一難題，特別是嵌套數據的監聽。
這裏的變化指的是地址的變化，能夠觸發變化最簡單的方式就是重新賦值。
<template>
<div>
<label>up trigger {{ counter.up }} times</label>
<button @click="onTrigger('up')">Trigger Up</button>
<br>
<label>down trigger {{ counter.down }} times</label>
<button @click="onTrigger('down')">Trigger down</button>
</div>
</template>
<script>
export default {
name: "Counter",
data: function() {
return {
counter: {
up: 0,
down: 0,
},
};
},
methods: {
onTrigger: function(type) {
this.counter[type] += 1;
}
},
watch: {
counter: function(newV, oldV) {
// 不會被觸發
console.log('counter change to %o from %o', newV, oldV);
},
}
};
</script>
針對counter的監聽不會被觸發，因爲this.counter[type] += 1;並不會使this.counter變化（地址沒變）。那如果想要監聽到這個變化應該怎麼辦呢？一般來說有兩種方式：
使用deep參數
watch: {
counter: {
handler: function(newV, oldV) {
console.log('counter change to %o from %o', newV, oldV);
},
deep: true,
}
}
使用deep需要使用watch的完整形式：handler是監聽回調函數，deep: true指定了不僅僅監聽counter的變化，也監聽其內部屬性的變化，所以當counter.up或counter.down變化時才能出發handler回調。
重新賦值
methods: {
onTrigger: function(type) {
// 重新賦值觸發變化
this.counter = {
...this.counter,
[type]: this.counter[type] + 1,
};
}
},
watch: {
counter: function(newV, oldV) {
// 不會被觸發
console.log('counter change to %o from %o', newV, oldV);
},
}
那兩種方式優劣如何呢？使用deep參數會爲數據每一層都添加監聽，當層級較深時比較耗費性能，而且Vue不能監聽到屬性的添加或刪除。所以一般來說使用重新賦值的方式是較優的方案，但如果只是想監聽內部嵌套數據的話，重新賦值就比較重了，所以Vue也提供了直接監聽嵌套屬性變化的途徑：
通過路徑監聽內部數據
watch: {
'counter.up': function(newV, oldV) {
console.log('counter.up change to %d from %d', newV, oldV);
},
'counter.down': function(newV, oldV) {
console.log('counter.down change to %d from %d', newV, oldV);
},
}
通過這種方式可以避免使用deep造成的性能消耗問題，當只對某內部屬性變化作出響應的場景下比較合適，但仍要注意監聽的路徑數據仍是複雜數據時的場景。
初始化變量觸發監聽回調
使用watch監聽變化時，給變量初始值不會觸發監聽函數，如果像要改變這個默認設定可以使用immediate參數，其用法和deep類似：
watch: {
counter: {
handler: function(newV, oldV) {
console.log('counter change to %o from %o', newV, oldV);
},
immediate: true,
}
}
這樣在賦初值時就會觸發監聽函數，其中第一個參數爲初始值，第二個參數爲undefined。
總結
使用watch可以監聽屬性的變化，且其使用方式也不少，理解每種方式的使用場景能爲開發節省時間，優化性能。