在Vue中，深度监听是一种非常常见且重要的功能，它可以让我们监听对象内部的所有属性，并对这些属性的变化做出相应的处理。在本篇博客中，我将为大家介绍Vue中如何实现深度监听的方法，并附上示例代码以帮助大家更好地理解。
1. 使用`$watch`实现深度监听
Vue提供了$watchAPI来实现深度监听，通过设置deep: true即可对对象进行深度监听。下面是一个示例代码：
new Vue({
data: {
obj: {
a: 123,
b: 'hello'
}
},
created() {
this.$watch('obj', (newVal, oldVal) => {
console.log('obj发生了变化', newVal, oldVal)
}, { deep: true })
},
methods: {
updateObj() {
this.obj.a = 456
}
}
})在上面的代码中，我们首先定义了一个包含`obj`对象的Vue实例。然后在`created`钩子中使用`$watch`来监听`obj`对象的变化，设置`deep: true`即可实现深度监听。当执行`updateObj`方法时，修改`obj.a`的值，控制台将输出`obj发生了变化 {a: 456, b: 'hello'} {a: 123, b: 'hello'}`。
2. 使用`Vue.set`实现深度监听
除了使用$watch，我们还可以通过Vue.set来实现深度监听。Vue.set可以确保在对象上添加新属性时，能够触发响应式更新。以下是一个示例代码：
new Vue({
data: {
obj: {
a: 123,
b: 'hello'
}
},
created() {
Vue.set(this.obj, 'c', 'world')
}
})3. 使用`watch`属性实现深度监听
除了使用$watch和Vue.set，我们还可以在组件的watch属性中声明一个监听器，实现深度监听。以下是一个示例代码：
new Vue({
data: {
obj: {
a: 123,
b: 'hello'
}
},
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj发生了变化', newVal, oldVal)
},
deep: true
}
}
})
