vue 3 响应式核心改用 proxy 实现懒代理、对象级拦截、按需依赖追踪及集合类型支持，相比 vue 2 的 object.defineproperty 具备初始化开销低、拦截能力全、运行时更可控、扩展性更强四大优势。
Vue 3 的响应式核心从 Object.defineProperty 切换到 Proxy，不是简单 API 替换，而是整个响应式范式的重构。要从源码层面理解优势，关键看三个底层机制：初始化方式、拦截能力边界、运行时行为逻辑。
初始化阶段：递归遍历 vs 懒代理
Vue 2 在 initData 阶段会同步调用 observe，对 data 对象执行深度遍历，为每个属性（包括嵌套对象所有字段）逐个调用 defineReactive。这意味着：
- 哪怕一个对象有 10 层嵌套、500 个属性，初始化时全部转成 getter/setter
- 内存立即分配，CPU 时间集中在首帧，大型表单或配置页明显卡顿
- 未使用的深层属性也被处理，属于“过度响应”
Vue 3 的 reactive 函数在 packages/reactivity/src/reactive.ts 中实现，只对顶层对象创建 Proxy，内部嵌套对象不立即处理。真正访问 state.user.profile.name 时，才在 get trap 中触发 reactive 递归包裹 —— 这就是「懒代理」。源码里能看到 trackRefValue 和 triggerRefValue 的按需触发路径，初始化开销几乎恒定。
拦截粒度：属性级劫持 vs 对象级代理
Object.defineProperty 是属性级的：它只能监听已存在的 key 的 get/set，其他操作全不可见。Vue 2 源码中对数组的处理就暴露了这点——必须重写 push、splice 等 7 个方法（见 src/core/observer/array.js），靠“兜底变异”补漏。
Proxy 是对象级的，提供 13 种 trap，Vue 3 在 baseHandlers.ts 中完整实现：
-
set+get：基础读写响应 -
has：支持'key' in obj -
deleteProperty：直接delete state.key可触发更新 -
ownKeys：Object.keys()、for...in均可被追踪 -
getOwnPropertyDescriptor：兼容 Reflect API
所以 Vue 3 能原生支持 state.obj.newKey = 'v'、state.arr[5] = x、state.arr.length = 0，无需额外 API。
运行时行为：内联优化瓶颈 vs trap 可控调度
虽然 Proxy 每次读写都要走 JS 层函数调用（get(target, key, receiver)），看似比 Object.defineProperty 的原生 getter 更重，但 Vue 3 通过设计规避了高频陷阱开销：
- 用
shallowRef和markRaw显式跳过 Proxy 包裹（如 Canvas context、Three.js 实例） - 依赖收集（
track）和触发（trigger）只在真正产生副作用时发生，非每次 get 都收集 - 源码中
effect的依赖树是扁平化存储（deps数组），避免嵌套遍历
而 Vue 2 的 Dep 类在每次 get 都强制执行 depend()，且依赖关系是嵌套映射（target → key → dep），深层对象更新时遍历成本更高。
扩展性与语义完整性
Vue 2 无法响应 Map、Set、WeakMap 等集合类型，因为 Object.defineProperty 只适用于普通对象。Vue 3 的 Proxy 可以拦截任意对象（包括内置集合），collectionsHandlers.ts 中专门实现了对 Map 的 set、delete、clear 等 trap，使 ref(new Map()) 具备完整响应能力。
另外，Reflect 与 Proxy 天然配对，Vue 3 所有 trap 内部都优先使用 Reflect.get、Reflect.set 等，保证语义一致性，也便于未来对接其他元编程场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
