vue在開發過程中，我們常常需要監聽對象深層次的變化。Vue.js提供了一個功能強大的響應式系統，任何的數據改變都會被監聽到并自動更新相關的DOM。然而，如果我們對一個數組或對象進行修改，Vue.js默認的Watcher并不能監聽到這些改變，這就導致了部分的不便。針對這個問題，Vue.js提供了一個叫做deep watcher的技術，可以方便地監聽對象的改變。

//例1
let vm = new Vue({
data: {
obj: {
name: 'John',
age: 18,
address: {
city: 'New York',
street: 'ABC Street'
}
}
},
watch: {
obj: {
handler: function(val, oldVal) {
console.log('obj changed!');
},
deep: true
}
}
});
vm.obj.name = 'Mike';   //輸出'obj changed!'
vm.obj.address.city = 'Los Angeles';  //輸出'obj changed!'

在上面的例子中，我們定義了一個對象obj，它包含兩個簡單的變量和一個新的對象地址變量。在實例的watch屬性中，添加了一個對這個obj對象的監測，當obj中任何值被修改時，console上會輸出'obj changed!'。由于deep標志位為true，對obj地址變量任何地方的修改都會被監聽。無論是直接修改內部的變量，還是直接修改address的值，都會觸發deep watcher并輸出對應的信息。

//例2
let vm = new Vue({
data: {
arr: [1, 2, [3, 4], 5]
},
watch: {
arr: {
handler: function(val, oldVal) {
console.log('arr changed!');
},
deep: true
}
}
});
vm.arr[1] = 3;   //輸出'arr changed!'
vm.arr[2][0] = 6;  //輸出'arr changed!'

在第二個例子中，我們定義了一個數組arr，它包括了幾種不同類型的值。同樣地，在實例的watch屬性中添加了一個對這個arr數組的監測。無論是直接修改數組元素，還是修改數組元素的子元素（即數組的地址變量），都會觸發deep watcher并輸出相應的信息。這種監聽技術可以實現深層次的數據監聽，方便用戶處理復雜數據結構的變化。