JavaScript数据绑定原生靠Object.defineProperty（ES5）或Proxy（ES6+），后者支持新增/删除属性、数组索引赋值等，但需递归代理嵌套对象且必须返回true；Vue 2受限于defineProperty，Vue 3用Proxy+Reflect解决限制；React无响应式监听，依赖setState触发重渲染；框架不直接暴露Proxy因需协同依赖收集、更新队列、生命周期等完整机制。

JavaScript 原生实现数据绑定：靠 Object.defineProperty 或 Proxy

原生 JS 实现响应式数据绑定，核心是拦截对对象属性的读取和修改。ES5 用 Object.defineProperty，ES6+ 推荐 Proxy —— 因为后者能监听新增/删除属性、数组索引赋值、in 操作等，defineProperty 对这些无能为力。

常见错误现象：obj.newProp = 'x' 在 defineProperty 下不会触发更新；数组直接通过索引赋值（如 arr[0] = 1）也不响应；delete obj.key 同样静默。

• Proxy 必须作用于整个对象，不能只代理某几个字段；返回的是新代理对象，原对象不自动响应
• 嵌套对象需递归代理，否则深层变更不触发；但递归可能引发性能问题或循环引用崩溃
• Proxy 的 set trap 中，必须显式返回 true 才算赋值成功，否则静默失败

const reactive = (obj) => {
  if (typeof obj !== 'object' || obj === null) return obj;
  return new Proxy(obj, {
    set(target, key, val) {
      console.log(`设置 ${key} =`, val);
      target[key] = val;
      return true; // 必须返回 true
    },
    get(target, key) {
      console.log(`读取 ${key}`);
      return target[key];
    }
  });
};

Vue 2 vs Vue 3 的响应式机制差异

Vue 2 使用 Object.defineProperty，在初始化时遍历 data 所有属性并定义 getter/setter。这意味着：属性必须在 data 中预先声明，否则无法响应；且对 Map/Set/WeakMap 等原生集合类型完全不支持。

Vue 3 改用 Proxy + Reflect，解决了上述限制，也允许直接监听数组索引、length 变更、新增属性等。但代价是：IE 完全不兼容；且 ref 和 reactive 的行为边界更关键——reactive 只接受对象，基本类型必须用 ref 包一层。

• reactive({}) 返回的是代理对象，不能解构使用（会丢失响应性），应始终通过原变量访问
• ref(1) 内部其实也是用 Proxy 实现，但对 `.value` 的访问做了特殊处理；模板中可省略 .value，JS 逻辑里必须写
• Vue 2 的 vm.$set 在 Vue 3 中被 nextTick + reactive 替代，不再需要手动“唤醒”新属性

React 的“数据绑定”本质是状态驱动 UI，不是响应式监听

React 并没有传统意义上的数据绑定。它不监听 state 变化，而是靠 setState（或 useState 的 setter）主动触发重新渲染。所谓“绑定”，其实是 JSX 表达式在每次 render 时重新求值，形成视图与当前 state 的瞬时映射。

容易踩的坑：useState 的更新是异步批处理的，多次调用可能合并；对象属性修改（如 state.obj.x = 1）不会触发更新，因为没调用 setter；必须用函数式更新或结构展开保证不可变性。

• 不要直接修改 state 对象或数组，要用 setState(prev => ({...prev, x: 1})) 或 [...arr] 等方式创建新引用
• 自定义 Hook 中若依赖某个对象的深层字段，应配合 useMemo 或 useCallback 避免无效重计算
• React.memo 浅比较 props，深层对象变更仍会触发子组件重渲染，必要时需手动 useMemo 缓存

为什么现代框架不直接暴露 Proxy 给用户写业务逻辑

因为响应式系统不只是“监听赋值”，还涉及依赖收集、触发更新、批量队列、组件生命周期联动、模板编译优化等多个环节。你手写的 Proxy 只能打日志或简单通知，没法和虚拟 DOM diff、组件挂载/卸载、effect 清理等机制协同工作。

比如 Vue 的 watch 要支持 deep、immediate、cleanup；React 的 useEffect 要自动清理上一次副作用；Svelte 编译时就能静态分析响应关系，运行时几乎零开销——这些都不是靠一个 Proxy 就能平替的。

真正容易被忽略的一点：响应式系统的性能成本不在代理本身，而在依赖追踪粒度。细粒度（如每个属性一个 dep）内存占用高；粗粒度（如整个对象一个 dep）又容易过度更新。框架内部做了大量权衡和优化，而手写方案往往卡在“要么太卡，要么不灵”的中间地带。