17370845950

Proxy 是当前推荐的首选方案，因其更现代、能力更强、适用性更广；Object.defineProperty 仅适用于兼容老环境或极简场景，存在无法监听动态属性、数组方法无响应、嵌套代理复杂等局限。

实现 JavaScript 数据绑定时，Object.defineProperty 和 Proxy 都能拦截对象操作，但 Proxy 更现代、能力更强、适用性更广，是当前推荐的首选方案；Object.defineProperty 仅适用于兼容老环境或极简场景，存在明显局限。

Object.defineProperty 的核心限制

它只能劫持已存在的属性，无法监听动态新增/删除属性、数组索引变化、for...in 遍历、Object.keys 等操作：

• 必须提前声明所有响应式字段（否则后续添加不会触发更新）
• 对数组常用方法（如 push、pop、splice）无反应，需重写原型方法“打补丁”
• 无法代理整个对象，只能逐个定义属性，嵌套对象需递归处理，易出错且性能差
• 不支持 Map、Set、Date、RegExp 等内置类型

Proxy 天然支持全面拦截

Proxy 以对象为单位代理，通过 handler 拦截 13 种操作，覆盖绝大多数数据交互场景：

• 自动响应属性新增、删除（set / deleteProperty）
• 可精确拦截数组索引赋值、length 修改、甚至 in 操作符和遍历行为（ownKeys、enumerate）
• 支持深层嵌套代理（配合递归或懒代理策略），逻辑更清晰
• 能代理 Map、Set、函数等任意对象，扩展性强（例如 Vue 3 的 reactive 就基于 Proxy）

兼容性与实际选型建议

若项目需支持 IE 或 iOS Object.defineProperty 是唯一选择（如 Vue 2）；否则应优先用 Proxy：

• 现代框架（Vue 3、SolidJS、Qwik）全部基于 Proxy 实现响应式系统
• 手写简单绑定时，Proxy 代码更简洁、可维护性更高（避免递归 defineProperty 的陷阱）
• 注意：Proxy 返回的是新对象，原对象不受影响，需统一使用代理后的引用

一个最小可用 Proxy 绑定示例

无需第三方库，几行代码即可实现基础响应式：

function reactive(obj) {
  return new Proxy(obj, {
    set(target, key, value) {
      const oldVal = target[key];
      target[key] = value;
      if (oldVal !== value) console.log(`更新: ${key} =`, value);
      return true;
    }
  });
}

const state = reactive({ count: 0 });
state.count++; // 控制台输出更新日志
state.name = 'test'; // 新增属性也生效