vue双向绑定实现简单
Vue 双向绑定的实现原理
Vue 的双向绑定主要通过 v-model 指令实现，其核心是结合了数据劫持（Object.defineProperty 或 Proxy）和发布-订阅模式。以下是简化版的实现逻辑：
数据劫持
通过 Object.defineProperty 监听对象属性的变化：
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
// 触发更新
dep.notify();
}
});
}依赖收集（Dep 类）
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}观察者（Watcher 类）
class Watcher {
constructor(vm, key, updateFn) {
this.vm = vm;
this.key = key;
this.updateFn = updateFn;
Dep.target = this;
this.vm[this.key]; // 触发 getter 收集依赖
Dep.target = null;
}
update() {
this.updateFn.call(this.vm, this.vm[this.key]);
}
}简单实现示例
以下是一个极简的双向绑定 Demo：
<input id="input" type="text">
<p id="text"></p>
<script>
const data = { value: '' };
const input = document.getElementById('input');
const text = document.getElementById('text');
// 数据劫持
Object.defineProperty(data, 'value', {
get() {
return this._value;
},
set(newVal) {
this._value = newVal;
text.innerText = newVal; // 更新视图
}
});
// 视图 -> 数据
input.addEventListener('input', (e) => {
data.value = e.target.value;
});
// 初始化
data.value = 'Hello Vue';
input.value = data.value;
</script>现代实现（Proxy 替代）
Vue 3 使用 Proxy 实现更高效的数据监听：
const data = new Proxy({ value: '' }, {
set(target, key, value) {
target[key] = value;
text.innerText = value;
return true;
}
});关键点
- 数据驱动视图：通过数据变化自动更新 DOM。
- 视图影响数据：通过事件监听（如
input）修改数据。 - 性能优化：Vue 实际实现中会使用虚拟 DOM 和异步更新策略。
