双向绑定通过数据劫持与发布订阅模式实现，Vue 2使用Object.defineProperty劫持属性的get和set，在get中收集依赖、set中触发更新，并结合v-model指令绑定input事件实现视图到数据的反向更新；Vue 3采用Proxy代理整个对象，可监听属性增删及更多操作，提升了性能与灵活性，核心思想为数据变化自动更新视图、用户操作同步修改数据。
双向数据绑定指的是数据模型与视图之间的自动同步：当数据变化时，视图自动更新；当用户操作视像（如输入框）时，数据模型也自动更新。JavaScript中实现双向绑定的核心在于监听数据变化和监听DOM事件，并在这两者之间建立桥梁。
数据劫持 + 发布订阅模式
在Vue 2中，双向绑定主要依赖于Object.defineProperty对对象属性进行劫持，在getter中收集依赖，在setter中触发更新。
基本思路如下：
- 遍历数据对象，使用Object.defineProperty拦截每个属性的get和set
- 在get中收集依赖（哪个视图用到了这个数据）
- 在set中通知所有依赖进行更新
- 结合编译模板，解析指令如v-model，绑定input事件来反向更新数据
示例代码简化实现：
立即学习“Java免费学习笔记（深入）”；
function observe(data) {
if (typeof data !== 'object' || data === null) return;
for (let key in data) {
let value = data[key];
observe(value); // 深度监听
Object.defineProperty(data, key, {
get() {
return value;
},
set(newVal) {
if (newVal === value) return;
value = newVal;
updateView(); // 触发视图更新
}
});
}
}
v-model 的实现机制
以input元素为例，v-model本质上是value属性绑定和input事件监听的语法糖。
实现方式：
- 将input的value绑定到数据字段
- 监听input事件，事件触发时更新对应的数据字段
- 数据更新后，通过上述的set触发视图重新渲染
简单示例：
const data = { text: '' };
observe(data);
const input = document.getElementById('input');
input.addEventListener('input', function () {
data.text = this.value; // 视图 → 数据
});
// 数据 → 视图
function updateView() {
input.value = data.text;
}
updateView();
Vue 3 中的改进：Proxy
Vue 3 使用Proxy替代了Object.defineProperty，解决了后者无法监听对象新增/删除属性的问题。
Proxy可以代理整个对象，拦截更多操作（如in、delete等），性能更好，逻辑更清晰。
function reactive(data) {
return new Proxy(data, {
get(target, key) {
return Reflect.get(target, key);
},
set(target, key, value) {
const result = Reflect.set(target, key, value);
updateView(); // 触发更新
return result;
}
});
}
基本上就这些。双向绑定的本质是“数据劫持 + 回调通知”，配合模板编译完成联动。虽然框架底层实现复杂，但核心思想清晰：监听数据变，响应式更新UI；监听用户操作，反向修改数据。
