Vue 提供了深度監(jiān)聽(tīng)對(duì)象的方法，這使得我們可以更加方便地操作和修改數(shù)據(jù)。在 Vue 中，我們可以通過(guò) $watch 來(lái)實(shí)現(xiàn)深度監(jiān)聽(tīng)對(duì)象，它可以監(jiān)聽(tīng)對(duì)象中每一個(gè)屬性的變動(dòng)。下面，我們來(lái)仔細(xì)看一下如何使用 $watch 實(shí)現(xiàn)深度監(jiān)聽(tīng)對(duì)象。

const data = {
name: "Tom",
age: 18,
location: {
city: "Beijing",
country: "China"
}
}
const vm = new Vue({
data: data
})
vm.$watch("location", function(newVal, oldVal) {
console.log(newVal, oldVal)
}, { deep: true })

在上面的代碼中，我們先定義了一個(gè) data 對(duì)象，包含了一些屬性和一個(gè) location 對(duì)象。接下來(lái)我們使用 Vue 實(shí)例將 data 對(duì)象進(jìn)行了監(jiān)聽(tīng)，監(jiān)聽(tīng)的屬性是 location。這里如果我們不設(shè)置 deep 參數(shù)，那么只有 location 這個(gè)對(duì)象被替換后才能觸發(fā)回調(diào)函數(shù)。而當(dāng)設(shè)置了 deep 參數(shù)后，無(wú)論 location 對(duì)象的哪個(gè)屬性被修改了，都會(huì)觸發(fā)回調(diào)函數(shù)。

除了上面的 $watch 方法外，Vue 還有一個(gè) $set 方法可以用于動(dòng)態(tài)添加屬性并觸發(fā)深度監(jiān)聽(tīng)。例如，我們可以通過(guò) $set 來(lái)給 location 對(duì)象添加一個(gè)新的屬性：

vm.$set(data.location, "district", "Haidian")

這樣，當(dāng)我們動(dòng)態(tài)添加了新的屬性時(shí)，Vue 會(huì)自動(dòng)調(diào)用 $watch 方法，并觸發(fā)回調(diào)函數(shù)。

對(duì)于數(shù)組的深度監(jiān)聽(tīng)，Vue 同樣提供了方便的方法。我們可以通過(guò) $watch 來(lái)監(jiān)聽(tīng)數(shù)組中的每一個(gè)元素的變化，而不是只監(jiān)聽(tīng)數(shù)組本身的變化。

const arr = ["apple", "banana", "orange"]
const vm = new Vue({
data() {
return {
fruitList: arr
}
}
})
vm.$watch("fruitList", function(newVal, oldVal) {
console.log(newVal, oldVal)
}, { deep: true })
// 改變數(shù)組中的元素，觸發(fā)回調(diào)函數(shù)
vm.fruitList[1] = "watermelon"

在上面的代碼中，我們先定義了一個(gè)數(shù)組 fruitList，并將其作為 Vue 實(shí)例的 data 對(duì)象。然后，我們使用 $watch 來(lái)監(jiān)聽(tīng)這個(gè)數(shù)組，并開(kāi)啟了 deep 模式。之后，我們修改了這個(gè)數(shù)組中的第二個(gè)元素，即觸發(fā)了回調(diào)函數(shù)。

總而言之，Vue 可以非常方便地實(shí)現(xiàn)深度監(jiān)聽(tīng)對(duì)象和數(shù)組。通過(guò) $watch 和 $set 等方法，我們可以很容易地進(jìn)行數(shù)據(jù)監(jiān)控和修改操作。這些特性也是 Vue 地位越來(lái)越高的重要原因之一。