vue组件依赖追踪是浅层的,仅响应渲染中实际访问的属性;proxy实现细粒度响应,未读取的深层属性不触发更新;watch/computed深度行为取决于是否显式读取字段。

Vue 组件渲染时的依赖追踪默认是浅层的,只监听对象顶层属性的变化;如果模板里没读到深层属性(比如 user.profile.age),那它改了也不会触发更新。要让嵌套结构也能响应,就得启用深度监听——但不是靠手动加 deep: true 配置,而是取决于数据是否在渲染过程中被真正访问过。
依赖收集发生在渲染执行时
Vue 不会提前遍历整个对象树去“预设”所有嵌套属性为响应式,而是在组件首次渲染、计算属性求值或侦听器执行这些活跃副作用中,逐层触发 getter 才完成依赖收集。
- 模板中写了
{{ user.name }}→ 只收集user.name的依赖,user.profile和user.profile.age不进追踪链 - 写了
{{ user.profile.age }}→ 触发user→profile→age三级 getter,三层都加入依赖 - 哪怕对象有十层嵌套,只要某一层没在 render 中被读取,那一层就“不可见”,改了也不更新视图
Proxy 拦截确保细粒度追踪
Vue 3 使用 Proxy 实现响应式,每个属性的 get/set 都可独立拦截。这使得依赖能精确绑定到具体字段,而非整个对象。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
reactive({ a: { b: { c: 1 } } })中,a.b.c有自己的 Dep,a.b也有自己的 Dep - 修改
obj.a.b.c = 2→ 只触发c对应的 Dep.notify(),不会误刷a或b的依赖 - 数组操作如
arr.push(x)会被重写方法捕获,连length变更都会触发对应依赖
深层属性不响应?先检查是否被读取
遇到“改了深层数据但界面没更新”,大概率不是响应式失效,而是那个字段根本没进过渲染流程。
- 模板里只用了
{{ user.name }},却去改user.profile.city→ 不触发更新 - 解决办法:在模板、computed 或 setup 中显式访问该字段,哪怕只是
{{ user.profile.city || '' }} - 动态属性或索引访问(如
obj[key]、arr[i])需用ref或toRef包装,否则 Proxy 无法劫持
watch 和 computed 的深度行为一致
它们和渲染函数共享同一套依赖追踪机制,是否深度响应,同样取决于函数体内部是否实际读取了深层字段。
-
watch(() => user.profile, ...)→ 收集user.profile整个对象的依赖,但不包括profile.age的变化 -
watch(() => user.profile.age, ...)→ 精确追踪age,改它才触发 -
watch(user, { deep: true }, ...)是 Vue 提供的便捷封装:内部会递归读取所有可枚举属性,强制建立完整依赖链
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










