vue如何实现watchdeep
Vue 中实现深度监听（deep watch）
在 Vue 中，watch 选项可以监听数据变化。默认情况下，watch 是浅层的（shallow），仅监听对象引用的变化。如果需要深度监听对象内部属性的变化，可以使用 deep 选项。
基本语法
watch: {
targetObject: {
handler(newVal, oldVal) {
// 处理变化
},
deep: true // 启用深度监听
}
}示例代码
export default {
data() {
return {
user: {
name: 'Alice',
address: {
city: 'New York'
}
}
}
},
watch: {
user: {
handler(newVal, oldVal) {
console.log('User data changed:', newVal)
},
deep: true
}
}
}监听特定嵌套属性
如果只需要监听对象中的某个嵌套属性，可以使用点语法：
watch: {
'user.address.city'(newVal, oldVal) {
console.log('City changed:', newVal)
}
}立即触发回调
如果需要立即执行一次监听回调，可以使用 immediate 选项：
watch: {
user: {
handler(newVal, oldVal) {
console.log('User data changed:', newVal)
},
deep: true,
immediate: true
}
}使用 $watch API
也可以在组件实例中通过 this.$watch 动态添加深度监听：
created() {
this.$watch(
'user',
(newVal, oldVal) => {
console.log('User data changed:', newVal)
},
{ deep: true }
)
}注意事项
- 深度监听会遍历对象的所有属性，可能对性能有影响，尤其是监听大型对象时。
- 对于数组的变更（如 push、pop 等），Vue 已经进行了封装，无需深度监听也能触发更新。但直接通过索引修改数组元素时，仍需使用
Vue.set或数组的变异方法。
