在Vue中实现深度监听的示例代码
更新时间：2025年03月03日 09:25:42 作者：2301_76303308
在 Vue 中,深度监听是指监听一个对象或数组的嵌套属性（深层结构）的变化,而不仅仅是监听顶层属性的引用变化,本文给大家介绍了如何在Vue中实现深度监听,并通过代码示例介绍的非常详细,需要的朋友可以参考下
一、什么是深度监听？
在 Vue 中，深度监听是指监听一个对象或数组的嵌套属性（深层结构）的变化，而不仅仅是监听顶层属性的引用变化。Vue 的响应式系统默认只监听对象的浅层属性（即直接属性），如果需要监听对象内部的嵌套属性变化，就需要启用 深度监听。
二、实现深度监听的方法
Vue 提供了 watch 选项（或 @watch 装饰器）来监听数据变化，通过设置 deep: true 可以实现深度监听。以下是具体实现方式：
1. 使用 watch 选项
语法：
watch: {
// 监听的对象
obj: {
handler(newVal, oldVal) {
console.log('obj 变化了:', newVal, oldVal);
},
deep: true // 开启深度监听
}
}
完整示例：
new Vue({
el: '#app',
data() {
return {
obj: {
a: 1,
b: {
c: 2
}
}
};
},
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj 更新:', newVal);
},
deep: true
}
},
methods: {
changeObj() {
this.obj.b.c = 3; // 修改深层属性
}
}
});
- 效果：当
obj.b.c变为 3 时，watch的handler会被触发，输出新值。
- 效果：当
说明：
deep: true会递归遍历obj的所有嵌套属性，确保任何深层变化都能触发监听。handler接收新值和旧值，但由于深层对象是引用类型，newVal和oldVal可能是同一个对象（仅内容不同）。
2. 使用 $watch 方法
- 语法：
this.$watch('obj', (newVal, oldVal) => {
console.log('obj 变化:', newVal);
}, {
deep: true
});
- 完整示例：
new Vue({
el: '#app',
data() {
return {
obj: {
a: 1,
b: { c: 2 }
}
};
},
mounted() {
this.$watch('obj', (newVal, oldVal) => {
console.log('obj 更新:', newVal);
}, {
deep: true
});
},
methods: {
changeObj() {
this.obj.b.c = 3;
}
}
});
- 效果：与
watch选项相同，监听深层变化。
3. 监听特定嵌套属性（避免深度监听）
- 原理：如果只关心某个深层属性，可以直接监听其路径，无需
deep。 - 代码：
watch: {
'obj.b.c'(newVal, oldVal) {
console.log('obj.b.c 变化:', newVal, oldVal);
}
}
- 效果：仅当
obj.b.c变化时触发，不监听其他属性。 - 优点：性能更高，避免不必要的递归监听。
三、深度监听的工作原理
- Vue 的响应式系统基于
Object.defineProperty（Vue 2）或Proxy（Vue 3）。 - 默认情况下，只有对象顶层属性被设置为响应式，嵌套属性的 setter/getter 需通过
deep: true递归绑定。 - 当
deep: true启用时，Vue 会遍历对象的所有属性，添加监听器，确保深层变化可被检测。
四、注意事项
- 性能开销：
deep: true会递归监听所有嵌套属性，对象越大，性能开销越高。- 优化建议：尽量监听具体属性（如
'obj.b.c'），或拆分数据结构。
- 新旧值问题：
- 深度监听时，
newVal和oldVal是同一个引用，需深拷贝比较差异：
- 深度监听时，
handler(newVal) {
const oldVal = JSON.parse(JSON.stringify(newVal));
// 比较逻辑
}
数组特殊情况：
- 数组的嵌套对象也支持深度监听，但数组本身的push等方法已默认响应式，无需
deep。 - 示例：
watch: {
'arr[0].a': {
handler(newVal) {
console.log('arr[0].a 变化:', newVal);
},
deep: true
}
}
- Vue 3 差异：
- Vue 3 使用
Proxy，深度监听更高效，但用法一致。
- Vue 3 使用
五、实际应用场景
- 表单数据：监听复杂表单对象的变化，实时校验。
watch: {
form: {
handler(newVal) {
this.validateForm(newVal);
},
deep: true
}
}
- 状态管理：监听嵌套状态（如 Vuex 的 state），触发更新。
- 动态配置：监听配置对象的变化，调整 UI。
六、面试扩展
如果面试官追问，我可以补充：
替代方案：用 computed 计算属性配合 watch
computed: {
objComputed() {
return JSON.stringify(this.obj); // 转为字符串比较
}
},
watch: {
objComputed(newVal, oldVal) {
console.log('obj 变化:', newVal);
}
}
性能优化：结合 immediate: true（初始触发）或防抖（debounce）：
watch: {
obj: {
handler: _.debounce(function(newVal) {
console.log('节流更新:', newVal);
}, 300),
deep: true
}
}
七、总结
- 核心方法：
watch或$watch设置deep: true。 - 推荐实践：优先监听具体属性，必要时用深度监听并优化性能。
- 代码示例已覆盖常见场景，面试中可根据需求调整。
到此这篇关于在Vue中实现深度监听的示例代码的文章就介绍到这了,更多相关Vue深度监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vant组件中 dialog的确认按钮的回调事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue 实现一个简单的鼠标拖拽滚动效果插件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇文章给大家详细分享了关于vue循环列表动态数据的处理方法以及相关知识点内容，有需要的朋友们参考下。2018-09-09
这篇文章主要介绍了Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-05-05
vue .js绑定checkbox并获取、改变选中状态的实例
今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下2024-05-05
这篇文章主要为大家介绍了前端vue3架构setup使用教程，详细介绍 setup 的用法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
今天小编就为大家带来一篇vue.js配合$.post从后台获取数据简单demo分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于Vue组件传参11种方式的相关资料,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
最新评论