Vue的每個(gè)實(shí)例都有一個(gè)watch屬性，它允許我們監(jiān)控vue實(shí)例數(shù)據(jù)的變化并做出相應(yīng)處理。對象和數(shù)組的監(jiān)聽有它們自己特定的方法，例如deep監(jiān)聽。

深度監(jiān)聽的原理：

watch: {
object: {
handler: function(val, oldVal) {...},
deep: true
}
}

當(dāng)數(shù)據(jù)對象 (object) 發(fā)生改變時(shí)，handler 函數(shù)可以獲取到新舊值的變化。而在 deep 模式下，無論修改了數(shù)據(jù)對象的深層還是淺層，其對應(yīng)的 handler 函數(shù)都會被觸發(fā)。

所以當(dāng)我們的數(shù)據(jù)是復(fù)雜對象嵌套的場景時(shí)，開啟 deep 選項(xiàng)來監(jiān)聽其屬性的變化是非常實(shí)用的。

與深度監(jiān)聽相關(guān)的注意事項(xiàng)：

1. 在監(jiān)聽帶有 deep 屬性的大對象時(shí)，需要謹(jǐn)慎使用，因?yàn)樗赡芎芟男阅堋?/li>
2. 當(dāng) watch 函數(shù)返回的值與舊值不同，Watcher 才會執(zhí)行相應(yīng)的更新函數(shù)。
3. 如果監(jiān)聽的數(shù)據(jù)對象是一個(gè)數(shù)組，數(shù)組的某些操作 (比如 push()) 可能無法完美覆蓋到 deep 模式的監(jiān)聽范圍內(nèi)，此時(shí)需要手動進(jìn)行更新。

舉例來說，對于上面第三個(gè)注意事項(xiàng)的解決方法，我們可以這樣做：

data() {
return {
obj: {
arr: []
}
}
},
watch: {
'obj.arr': {
handler: function (newVal) {
// Do whatever you want, or call a method
// 你可以做任何你想做的事，也可以調(diào)用另一個(gè)方法
},
deep: true
}
},
methods: {
setArr: function(arr) {
this.obj.arr = arr;
this.$forceUpdate();
}
}

當(dāng)你更新 obj.arr 屬性時(shí)，setArr() 函數(shù)將該值設(shè)置為一個(gè)新的數(shù)組，并強(qiáng)制更新 Watcher，以便能夠在 deep 模式下成功捕獲其變化。