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 都可独立拦截。这使得依赖能精确绑定到具体字段，而非整个对象。
-
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 提供的便捷封装：内部会递归读取所有可枚举属性，强制建立完整依赖链
