Vue3响应式系统：递归代理深监听解析

Vue 3 的响应式系统通过懒递归 Proxy 实现真正意义上的“深监听”——不是靠配置项（如 `deep: true`）在运行时模拟，而是在首次访问嵌套对象时按需、逐层自动创建代理，天然支持新增属性、数组索引赋值和原生数组方法；`ref` 也依托 `reactive` 底层实现深层响应，而基础类型和内置对象则被智能跳过，`shallow` 系列 API 更可精准控制递归边界，彻底告别 Vue 2 中的遍历缺陷与补丁依赖。

Vue 3 的“深监听”不是靠手动配置触发的，而是响应式系统在初始化时就自动完成的递归代理行为。它不依赖 deep: true 这类开关，本质是 Proxy 对嵌套结构的逐层拦截与再代理。

递归代理是怎么发生的？

当你调用 reactive({ a: { b: { c: 1 } } })，Vue 并不会只给顶层对象加一层 Proxy。它在 get 拦截中判断：如果读取的值是对象（或数组），就立刻用 reactive() 递归包装——也就是对 b 创建新 Proxy，再对 c 所在的对象继续处理。这个过程是懒执行、按需递进的，不是一次性全量展开。

• 首次访问 obj.a → 触发 get → 发现 a 是对象 → 自动调用 reactive(a)
• 后续访问 obj.a.b → 同样触发 get → 再次递归代理 b
• 修改 obj.a.b.c = 2 → 触发 set → 通知依赖更新，且不影响未访问过的分支

为什么 ref 也支持深层响应？

ref 看似包装一层 { value: ... }，但它内部仍基于 reactive 实现。例如 ref({ x: { y: 1 } })，其 .value 属性实际指向一个 reactive 对象，所以 .value.x.y 的变化天然可追踪。

• ref(10) → 内部是 reactive({ value: 10 })
• ref({ a: { b: 1 } }) → 内部是 reactive({ value: reactive({ a: reactive({ b: 1 }) }) })
• 所有嵌套层级都由 Proxy 逐层接管，无需额外标记

什么时候递归会“停”？

递归代理不是无条件无限深入。Vue 会对基础类型（string/number/boolean/null/undefined/Symbol）、内置对象（Date、RegExp、Map、Set 等）跳过代理，只做浅层响应。同时，shallow 系列 API（如 shallowRef、shallowReactive）会显式切断递归链：

• shallowReactive({ a: { b: 1 } }) → 只代理顶层，a 本身仍是普通对象，修改 a.b 不触发更新
• shallowRef({ x: 1 }).value = { y: 2 } → 仅触发 .value 引用变更，不递归代理新对象
• 若需更新视图，得手动调用 triggerRef()（仅对 shallowRef 有效）

和 Vue 2 的深度监听有本质区别

Vue 2 的 deep: true 是 watch 的运行时选项，它通过遍历+递归取值模拟“深度”，但无法响应新增属性或数组索引赋值；而 Vue 3 的递归代理是数据创建时就确立的响应关系，覆盖所有合法操作：

• 支持 arr[0] = 'new'、arr.length = 0、obj.newKey = 'val'
• 无需 Vue.set 或特殊 API 补丁
• 数组方法（push/pop/shift/unshift/splice）全部原生响应

今天关于《Vue3响应式系统：递归代理深监听解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！