vue 3 的深层监听通过 proxy 懒递归代理实现：首次访问嵌套属性时，get 拦截中检测值为对象/数组即调用 reactive 递归包装，逐层创建 proxy；基础类型和内置对象不代理，shallow 系列 api 显式终止递归。
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 的变化天然可追踪。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章