ES6 Proxy 实现双向绑定的核心是用 Proxy 拦截读写操作，配合 Reflect 保持原语义，并在 set 中触发 DOM 更新；它比 Object.defineProperty 更强大，支持动态属性、数组索引赋值和嵌套对象递归代理。
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 片段，实现输入框与页面文本的双向绑定：
<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 覆盖
为什么 Proxy 比 defineProperty 更适合双向绑定
这不是语法糖升级，而是能力维度的突破：
-
Object.defineProperty无法监听对象新增属性或delete操作，必须提前声明全部字段 - 它对数组索引赋值（如
arr[0] = 1）和length修改无反应，需重写 7 个变异方法 - Proxy 一次代理整个对象，天然支持动态属性、for...in、
Object.keys()、in操作符 - 初始化性能更好：Vue3 测试显示，千属性对象代理速度比 defineProperty 快 23%
