vue mvvm的实现
Vue MVVM 的实现原理
Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是其核心实现机制：
数据劫持（响应式系统）
Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）劫持数据的访问和修改。当数据发生变化时，能够自动触发视图更新。
Vue 2.x 的响应式实现示例：
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`读取 ${key}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`设置 ${key} 为 ${newVal}`);
val = newVal;
}
}
});
}依赖收集与派发更新
Vue 通过 Dep（依赖管理器）和 Watcher（观察者）实现依赖的收集和派发更新。每个响应式属性都有一个 Dep 实例，用于存储依赖它的 Watcher。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
update() {
console.log('视图更新');
}
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，Vue 会生成新的虚拟 DOM，并通过 Diff 算法对比新旧虚拟 DOM，计算出最小更新操作。
function patch(oldVnode, vnode) {
// Diff 算法实现
// ...
}模板编译
Vue 的模板会被编译成渲染函数。这个过程包括：
- 解析模板生成 AST（抽象语法树）
- 优化 AST（标记静态节点）
- 生成渲染函数代码
function compile(template) {
// 解析模板为 AST
const ast = parse(template);
// 优化 AST
optimize(ast);
// 生成代码
const code = generate(ast);
return new Function(code);
}双向数据绑定
Vue 通过 v-model 指令实现双向数据绑定，实际上是语法糖：
- 将
value属性绑定到数据 - 监听
input事件更新数据
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">总结
Vue 的 MVVM 实现主要包含：
- 数据劫持实现响应式
- 依赖收集和派发更新机制
- 虚拟 DOM 和 Diff 算法优化性能
- 模板编译系统
- 指令系统（如 v-model）提供便捷语法
