vue双向绑定实现方法
Vue双向绑定的实现方法
Vue的双向绑定主要通过数据劫持结合发布-订阅模式实现，核心是Object.defineProperty或Proxy。以下是具体实现方式：
使用Object.defineProperty（Vue 2.x）
通过劫持对象属性的getter和setter实现数据监听：
function defineReactive(obj, key, 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(); // 通知更新
}
});
}使用Proxy（Vue 3.x）
通过ES6的Proxy实现更强大的响应式系统：
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
track(target, key); // 依赖收集
return Reflect.get(target, key);
},
set(target, key, value) {
Reflect.set(target, key, value);
trigger(target, key); // 触发更新
return true;
}
});
}依赖收集与派发更新
实现简单的Dep和Watcher类：
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
update() {
// 执行更新操作（如更新DOM）
}
}模板编译
通过编译器将模板转换为渲染函数：
function compile(template) {
// 解析模板为AST
const ast = parse(template);
// 优化AST
optimize(ast);
// 生成渲染代码
const code = generate(ast);
return new Function(`with(this){return ${code}}`);
}双向绑定的完整流程
- 初始化时对data进行响应式处理
- 编译模板生成渲染函数
- 建立依赖关系（Watcher监听数据变化）
- 数据变化时触发setter，通知依赖更新
- 重新执行渲染函数更新DOM
Vue 3.x的改进在于使用Proxy替代Object.defineProperty，解决了数组监听和对象新增属性的问题，同时优化了依赖收集机制。
