17370845950

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：

• 必须在 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”——这些才是框架花大力气解决的部分。