JavaScript 中实现数据双向绑定的核心是 Proxy，它通过拦截 get/set 操作实现响应式劫持，支持数组、新增属性等，配合视图更新与事件监听即可完成 input 与 data 的自动同步。
JavaScript 中实现数据双向绑定，核心是让数据变化自动更新视图，同时用户操作视图（比如输入框修改）也能自动同步回数据。现代框架（如 Vue 3、React 的受控组件）背后都依赖类似机制，而原生 JS 可以用 Proxy 高效实现。
用 Proxy 实现响应式数据劫持
Proxy 是 ES6 引入的对象代理机制，能拦截对目标对象的读取（get）、赋值（set）、删除等操作。相比老式的 Object.defineProperty，Proxy 天然支持数组索引变更、新增属性、Map/Set 等，更完整、更灵活。
关键作用包括：
- 在 set 拦截中触发更新逻辑（比如刷新 DOM、通知订阅者）
- 在 get 拦截中收集依赖（用于后续精准更新）
- 可递归代理嵌套对象，实现深层响应式
- 避免为每个属性单独定义 getter/setter，代码更简洁
一个极简双向绑定示例（input ↔ data）
不依赖框架，仅用 Proxy + HTML 元素事件，就能实现基础双向绑定：
立即学习“Java免费学习笔记（深入）”；
const data = reactive({ message: 'Hello' });
function reactive(obj) {
return new Proxy(obj, {
set(target, key, value) {
target[key] = value;
// 触发视图更新：查找所有绑定 key 的元素并同步值
updateView(key, value);
return true;
}
});
}
function updateView(key, value) {
// 查找 data-bind="message" 的 input 元素
const el = document.querySelector(`[data-bind="${key}"]`);
if (el && el.value !== value) {
el.value = value;
}
}
// 绑定 input 输入事件
document.querySelector('input[data-bind]').addEventListener('input', e => {
const key = e.target.getAttribute('data-bind');
data[key] = e.target.value; // 触发 Proxy.set，自动更新其他地方
});
这样，修改 data.message 会更新 input 显示；用户在 input 中输入，也会反向更新 data.message —— 双向就成立了。
注意 Proxy 的限制和补充点
Proxy 本身不处理模板编译或依赖追踪细节，实际生产级双向绑定还需配合：
- 依赖收集系统（如用 WeakMap 存储 key → 订阅函数映射）
- 批量更新与异步队列（避免多次 set 触发多次 DOM 操作）
- 对数组方法（push/pop 等）做包装，因为直接调用不会触发 set
- 兼容性考虑：Proxy 不支持 IE，需搭配 Babel 或降级方案
基本上就这些。Proxy 是现代响应式系统的基石，它让“监听任意数据变化”这件事变得自然又可控，双向绑定只是它最直观的一个落地场景。
