vue实现mvvm
Vue 实现 MVVM 的原理
Vue 的 MVVM（Model-View-ViewModel）实现主要依赖数据绑定和响应式系统。ViewModel 是 Vue 实例，负责连接 Model 和 View。
数据劫持与响应式
Vue 使用 Object.defineProperty 或 Proxy 对数据进行劫持。当数据变化时，触发 setter 通知依赖更新。
// 简化版数据劫持
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
// 触发更新
}
});
}依赖收集与发布订阅
每个响应式属性有一个 Dep 实例，用于收集依赖（Watcher）。数据变化时，Dep 通知所有 Watcher 更新。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}模板编译
Vue 将模板编译为渲染函数。解析模板时遇到指令和插值表达式，会创建对应的 Watcher。
// 简化版编译
function compile(template) {
// 解析模板生成 AST
// 将 AST 转换为渲染函数
return new Function('with(this){return ' + generateCode(ast) + '}');
}虚拟 DOM 与 Diff 算法
Vue 使用虚拟 DOM 提高渲染效率。数据变化时生成新 VNode，通过 Diff 算法比对差异，最小化 DOM 操作。
function patch(oldVnode, vnode) {
// Diff 算法实现
// 更新真实 DOM
}双向数据绑定实现
v-model 是语法糖，结合 v-bind 和 v-on 实现双向绑定。
// 简化版 v-model
function model(node, key, vm) {
node.value = vm[key];
node.addEventListener('input', e => {
vm[key] = e.target.value;
});
}生命周期管理
Vue 实例生命周期钩子在不同阶段触发，便于开发者控制初始化、更新和销毁过程。
// 生命周期调用示例
callHook(vm, 'beforeCreate');
initState(vm);
callHook(vm, 'created');以上流程共同构成 Vue 的 MVVM 实现，实现数据驱动视图的自动化更新。
