Vue 2 用 Object.defineProperty 实现响应式，Vue 3 换成 Proxy；前者无法监听新增/删除属性、数组索引赋值、Map/Set 等操作，后者能——但 Proxy 不兼容 IE，且对嵌套对象需递归代理。
直接说结论：Vue 2 用 Object.defineProperty 实现响应式，Vue 3 换成 Proxy；前者无法监听新增/删除属性、数组索引赋值、Map/Set 等操作，后者能——但 Proxy 不兼容 IE，且对嵌套对象需递归代理。
Object.defineProperty 只能劫持已存在的属性
它本质是给对象的某个已有属性「加一层 getter/setter」，不触发就不会收集依赖。这意味着：
- 对象后续动态添加的新属性（如
obj.newKey = 1）完全不会被拦截，也不会触发视图更新 - 直接通过索引设置数组项（
arr[0] = 'x'）无效，因为数组长度不变时，索引不是“已定义属性”（Vue 2 内部靠重写数组方法兜底） - 无法监听
delete obj.key或in操作符 - 必须遍历对象所有自有属性手动定义，深层嵌套需递归调用，性能和代码都更重
const data = { a: 1 };
Object.defineProperty(data, 'a', {
get() { console.log('get a'); return this._a; },
set(v) { console.log('set a'); this._a = v; }
});
// ✅ 触发 getter/setter
data.a = 2;
// ❌ 下面这行完全静默，不触发任何逻辑
data.b = 3;
Proxy 可以拦截整个对象的操作行为
Proxy 是对「对象本身」做代理，拦截的是访问动作（get、set、deleteProperty、has、ownKeys 等），天然支持：
- 新增属性自动响应（
obj.newKey = 1被set拦截） - 删除属性可捕获（
delete obj.key→deleteProperty） - 数组索引赋值、
push、pop等全部走set或get，无需特殊处理 - 可拦截
in、for...in、Object.keys()（靠ownKeys和has）
const data = { a: 1 };
const proxy = new Proxy(data, {
get(target, key) {
console.log('get', key);
return target[key];
},
set(target, key, value) {
console.log('set', key, value);
target[key] = value;
return true;
}
});
proxy.a = 2; // ✅ log: set a 2
proxy.b = 3; // ✅ log: set b 3 —— 新增属性也被捕获
Proxy 的陷阱：不是所有操作都自动递归
Proxy 只代理最外层对象，内部嵌套对象仍是原始引用。如果读取 proxy.nested.obj，get 返回的是原生对象，后续修改它不会触发外层 Proxy 的 set：
立即学习“Java免费学习笔记（深入）”；
- 必须在
get中判断返回值是否为对象，如果是，再套一层Proxy（即递归代理） - 但要注意循环引用（如
obj.self = obj），需缓存已代理对象避免死循环 - 不能直接代理
undefined、null、原始值（string/number等），会报错 -
Proxy实例和原对象不相等（proxy !== original），某些库（如 JSON 序列化、instanceof）行为会变
兼容性与实际选型建议
如果你要自己实现轻量双向绑定，且不需要支持 IE：
- 优先用
Proxy，逻辑更干净，覆盖场景更全 - 若需兼容 IE11 或更低版本，只能用
Object.defineProperty，并接受它的限制（比如要求数据结构初始化时就定义好所有字段） - 注意：Vue 3 的
ref和reactive并非简单封装Proxy，而是配合依赖收集系统（track/trigger）、副作用调度（effect）一起工作——单独用Proxy只是第一步
真正难的从来不是“怎么代理”，而是“什么时候该通知更新”“哪些嵌套变化需要触发哪部分 UI”——这些才是框架花大力气解决的部分。
