vue双向绑定实现简单
Vue 双向绑定的实现原理
Vue 的双向绑定主要通过 v-model 指令实现，其核心是结合了数据劫持（Object.defineProperty 或 Proxy）和发布-订阅模式。以下是简化实现的关键步骤：
数据劫持（响应式系统）
通过 Object.defineProperty 或 ES6 的 Proxy 监听数据变化。以 Object.defineProperty 为例：
function observe(data) {
if (!data || typeof data !== 'object') return;
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key]);
});
}
function defineReactive(obj, key, val) {
observe(val); // 递归监听嵌套对象
const dep = new Dep(); // 依赖收集器
Object.defineProperty(obj, key, {
get() {
if (Dep.target) dep.addSub(Dep.target); // 收集依赖
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify(); // 通知更新
}
});
}依赖收集与发布-订阅
实现一个简单的依赖收集器（Dep）和订阅者（Watcher）：
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
constructor(vm, key, cb) {
this.vm = vm;
this.key = key;
this.cb = cb;
Dep.target = this; // 标记当前 Watcher
this.vm[this.key]; // 触发 getter 收集依赖
Dep.target = null;
}
update() {
this.cb.call(this.vm, this.vm[this.key]);
}
}指令解析与绑定
实现 v-model 的简易绑定逻辑：
function compile(el, vm) {
el.querySelectorAll('[v-model]').forEach(node => {
const key = node.getAttribute('v-model');
new Watcher(vm, key, value => {
node.value = value; // 数据变化时更新视图
});
node.addEventListener('input', e => {
vm[key] = e.target.value; // 视图变化时更新数据
});
});
}完整示例
将上述部分组合成一个简易的 Vue 类：
class SimpleVue {
constructor(options) {
this.$data = options.data;
observe(this.$data);
compile(options.el, this);
}
}
// 使用示例
const vm = new SimpleVue({
el: document.getElementById('app'),
data: { message: 'Hello Vue' }
});模板示例
<div id="app">
<input v-model="message" />
<p>{{ message }}</p>
</div>注意事项
- 现代 Vue 3 使用
Proxy替代Object.defineProperty，解决了无法监听新增属性的问题。 - 实际 Vue 的实现还包括虚拟 DOM、Diff 算法等优化，此处仅展示核心原理。
- 对于嵌套对象或数组，需递归监听或重写数组方法。
