双向数据绑定的核心是数据与视图的自动同步。通过object.defineproperty或proxy劫持数据，结合dom事件监听实现联动更新。
双向数据绑定的核心在于：当数据发生变化时，视图自动更新；当视图（如表单输入）发生变化时，数据也自动同步更新。JavaScript 中实现双向绑定主要有几种方式，其原理依赖于数据劫持或发布-订阅模式。
1. 基于 Object.defineProperty 的数据劫取
这是 Vue 2.x 实现双向绑定的基础。通过 Object.defineProperty 劫持对象属性的 getter 和 setter，在读取和赋值时插入自定义逻辑。
基本思路如下：
- 遍历数据对象，对每个属性使用 defineProperty 定义 getter 和 setter
- 在 getter 中收集依赖（哪个视图用到了这个数据）
- 在 setter 中通知所有依赖进行更新
- 结合指令或模板解析，把数据渲染到视图，并监听视图事件（如 input）来反向更新数据
let data = { message: 'hello' };
let view = document.getElementById('view');
let input = document.getElementById('input');
Object.defineProperty(data, 'message', {
get() {
return this._message;
},
set(value) {
this._message = value;
// 更新视图
view.innerText = value;
input.value = value;
}
});
// 初始化
data._message = 'hello';
view.innerText = data.message;
input.value = data.message;
// 监听输入框变化，反向更新数据
input.addEventListener('input', function() {
data.message = this.value;
});
2. 使用 Proxy 实现代理拦截（Vue 3 的方式）
Proxy 是 ES6 提供的新特性，能更强大地拦截整个对象的操作，包括属性新增、删除等，弥补了 defineProperty 的不足。
立即学习“Java免费学习笔记（深入）”；
它不需要递归遍历对象，可以监听动态添加的属性。
示例：
let data = { message: 'hello' };
let handler = {
set(target, key, value) {
target[key] = value;
// 视图更新逻辑
document.getElementById('view').innerText = value;
document.getElementById('input').value = value;
return true;
}
};
let proxy = new Proxy(data, handler);
// 绑定输入事件
document.getElementById('input').addEventListener('input', function() {
proxy.message = this.value;
});
// 初始渲染
document.getElementById('view').innerText = proxy.message;
document.getElementById('input').value = proxy.message;
3. 结合 DOM 事件实现双向同步
无论使用 defineProperty 还是 Proxy，都需要监听视图层的变化。常见的是对 input、textarea 等元素绑定 input 或 change 事件，将用户输入的值回写到数据模型。
关键点：
- 数据 → 视图：通过 setter 或响应式系统触发 UI 更新
- 视图 → 数据：通过事件监听，修改数据对象触发 setter
4. 框架中的实现简化了流程
像 Vue 使用了编译模板 + 响应式系统 + 虚拟 DOM 的组合。开发者只需写 v-model，框架自动完成：
- 解析模板，找到绑定的变量
- 建立响应式依赖
- 绑定事件监听器
基本上就这些。核心是“劫持数据访问”+“监听视图事件”，两者联动形成闭环。虽然手动实现不复杂，但框架处理了兼容性、性能优化和嵌套对象等问题。
