ES6 Proxy 怎么实现一个前端数据的双向绑定模拟器-js教程-PHP中文网

es6 proxy 实现双向绑定的核心是用 proxy 拦截读写操作，配合 reflect 保持原语义，并在 set 中触发 dom 更新；它比 object.defineproperty 更强大，支持动态属性、数组索引赋值和嵌套对象递归代理。

es6 proxy 怎么实现一个前端数据的双向绑定模拟器

ES6 Proxy 实现前端数据双向绑定，核心是用 Proxy 拦截对象的读写操作，配合 Reflect 保证原语义不丢失，并把视图更新逻辑嵌入 set 拦截器中。它比 Object.defineProperty 更简洁、更彻底——能监听新增/删除属性、数组索引赋值、甚至嵌套对象的深层变化（需递归代理）。

基础结构：代理对象 + DOM 元素联动

最简模型只需三步：创建被代理的数据对象、用 Proxy 包裹它并定义 get 和 set 行为、绑定 input 或其他元素的事件到代理属性上。

target 是原始数据容器（如空对象 {}），不直接操作它
handler.set 中触发视图更新（比如改 innerText、value 或 innerHTML）
handler.get 可用于依赖收集（Vue3 的 track 就在这里调用）
所有 DOM 修改都通过 set 触发，所有读取都走 get，形成闭环

关键代码：input ↔ 代理属性实时同步

下面是一个可直接运行的 HTML 片段，实现输入框与页面文本的双向绑定：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

<input type="text" id="input"><p id="output">初始值</p>

<script>
const data = {};
const proxy = new Proxy(data, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    // 同步到 DOM
    if (key === 'msg') {
      document.getElementById('output').textContent = value;
    }
    return true;
  }
});

// 初始化显示
document.getElementById('output').textContent = proxy.msg || '初始值';
document.getElementById('input').value = proxy.msg || '';

// 输入时更新代理
document.getElementById('input').addEventListener('input', e => {
  proxy.msg = e.target.value;
});
</script>

注意：input 事件比 keyup 更可靠（兼容粘贴、语音输入等）；set 必须返回 true 表示赋值成功，否则会抛错。

支持嵌套对象和数组的进阶处理

基础 Proxy 默认只代理第一层。要让 proxy.user.name 也响应式，需要在 get 中判断返回值是否为对象，并自动递归代理：

用 WeakMap 缓存已代理的对象，避免重复代理同一对象
get 返回对象时，检查是否已存在代理，没有就新建一个 new Proxy(val, handler)
对数组方法（如 push、pop）的拦截需单独在 handler 中补充 ownKeys、has、deleteProperty 等 trap
Vue3 的 reactive() 就是这样封装的：内部递归 + WeakMap 缓存 + 多 trap 覆盖