双向数据绑定是前端交互开发中的核心能力之一，指数据层和视图层可以双向同步，数据变更会自动驱动视图更新，视图的用户操作也会反向同步到数据层。原生javascript实现双向数据绑定不需要依赖任何框架，核心是通过数据劫持和事件监听两个方向的能力配合完成。
核心实现思路
双向数据绑定的实现主要分为两个方向：
- 数据到视图的同步：通过数据劫持监听数据变化，当数据被修改时触发视图更新逻辑
- 视图到数据的同步：监听视图的输入事件，当用户输入内容时把新值同步到数据层
基于Object.defineProperty的实现方案
1. 数据劫持实现
Object.defineProperty可以给对象的属性添加getter和setter，我们可以在setter中监听属性值的变化，触发更新逻辑。下面是基础的数据劫持代码：
// 数据劫持函数，监听obj的key变化，变化后执行cb回调
function defineReactive(obj, key, val, cb) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
// 数据变化时执行回调，更新视图
cb(newVal);
}
});
}
// 遍历对象所有属性进行劫持
function observe(obj, cb) {
if (!obj || typeof obj !== 'object') return;
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key], cb);
});
}
2. 视图更新与事件监听
完成数据劫持后，需要把数据变化和视图更新关联，同时监听输入框的input事件实现视图到数据的同步。下面是完整的双向绑定示例：
// 视图更新函数，把新值设置到对应的DOM元素上
function updateView(el, value) {
if (el.tagName === 'INPUT') {
el.value = value;
} else {
el.textContent = value;
}
}
// 初始化双向绑定
function initTwoWayBind(data, el) {
// 数据到视图的同步：数据变化时更新视图
observe(data, (newVal) => {
updateView(el, newVal);
});
// 视图到数据的同步：监听输入事件，把新值同步到数据
if (el.tagName === 'INPUT') {
el.addEventListener('input', (e) => {
data.value = e.target.value;
});
}
// 初始化视图
updateView(el, data.value);
}
// 使用示例
const data = { value: '初始值' };
const inputEl = document.querySelector('#input');
const textEl = document.querySelector('#text');
initTwoWayBind(data, inputEl);
initTwoWayBind(data, textEl);
对应的HTML结构如下：
<input type="text" id="input"> <p id="text"></p>
结合发布订阅模式优化
如果多个视图依赖同一个数据，上面的方案需要手动绑定多个回调，使用发布订阅模式可以统一管理依赖。核心思路是维护一个依赖收集器，数据变化时通知所有订阅的视图更新：
// 依赖收集器
class Dep {
constructor() {
this.subs = [];
}
// 添加订阅者
addSub(sub) {
this.subs.push(sub);
}
// 通知所有订阅者更新
notify(newVal) {
this.subs.forEach(sub => sub.update(newVal));
}
}
// 订阅者类
class Watcher {
constructor(el, key, data) {
this.el = el;
this.key = key;
this.data = data;
this.update(data[key]);
}
update(val) {
updateView(this.el, val);
}
}
// 优化后的数据劫持
function defineReactive(obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
// 这里可以在实际场景中收集当前正在执行的Watcher
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify(newVal);
}
});
// 创建Watcher并添加到依赖
const watcher = new Watcher(document.querySelector(`[v-bind=${key}]`), key, obj);
dep.addSub(watcher);
// 监听输入框的v-model绑定
const inputEl = document.querySelector(`[v-model=${key}]`);
if (inputEl) {
inputEl.addEventListener('input', (e) => {
obj[key] = e.target.value;
});
}
}
对应的HTML结构使用自定义属性标记绑定关系：
<input type="text" v-model="value"> <p v-bind="value"></p>
注意事项
- Object.defineProperty无法监听对象新增属性和数组索引变化，实际场景中需要额外处理这些边界情况
- 数据劫持是递归遍历对象的所有属性，如果对象层级很深会有一定的性能开销
- 视图更新时需要注意避免不必要的DOM操作，减少性能损耗
javascript双向数据绑定Object_defineProperty发布订阅模式数据响应式修改时间：2026-07-14 23:18:28