vue如何实现watchdeep
在Vue中实现深度监听（deep watch）可以通过watch选项或$watch方法结合deep: true配置完成。以下是具体实现方式：
使用watch选项
在组件的watch选项中，对需要深度监听的对象设置deep: true。当对象的嵌套属性变化时，回调函数会被触发。
export default {
data() {
return {
user: {
name: 'Alice',
address: {
city: 'New York'
}
}
};
},
watch: {
user: {
handler(newVal, oldVal) {
console.log('user对象或其嵌套属性发生变化', newVal, oldVal);
},
deep: true // 启用深度监听
}
}
};使用$watch方法
通过this.$watch动态添加深度监听，适合在组件生命周期中按需监听。
export default {
data() {
return {
product: {
id: 1,
details: {
price: 100
}
}
};
},
created() {
this.$watch(
'product',
(newVal, oldVal) => {
console.log('product对象或其嵌套属性变化', newVal, oldVal);
},
{ deep: true } // 配置深度监听
);
}
};注意事项
- 性能影响：深度监听会递归遍历对象的所有属性，可能对性能有较大影响，尤其是大型对象。
- 新旧值相同：对于嵌套对象，
newVal和oldVal可能指向同一个引用（Vue的响应式系统特性），需通过深拷贝比较差异。 - 替代方案：若只需监听特定嵌套属性，建议直接监听路径（如
'user.address.city'）。
监听特定嵌套属性
避免深度监听的性能开销，可以明确指定嵌套路径：
watch: {
'user.address.city'(newVal, oldVal) {
console.log('city变化:', newVal, oldVal);
}
}通过合理选择监听方式，可以平衡功能需求与性能。
