实现vue vm
Vue VM 实现原理
Vue VM（ViewModel）是 Vue.js 的核心部分，负责数据绑定和视图更新。以下是实现 Vue VM 的关键步骤：
数据劫持（响应式系统）
通过 Object.defineProperty 或 ES6 Proxy 拦截数据的读写操作。当数据被修改时，通知依赖的视图更新。
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal !== val) {
val = newVal;
// 触发更新
}
}
});
}依赖收集
每个响应式属性都有一个依赖收集器（Dep），用于存储所有依赖该属性的 Watcher 实例。
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}观察者（Watcher）
Watcher 实例代表一个依赖，当数据变化时执行回调函数（如更新视图）。
let target = null;
class Watcher {
constructor(vm, exp, cb) {
this.vm = vm;
this.getter = parsePath(exp);
this.cb = cb;
this.value = this.get();
}
get() {
target = this;
const value = this.getter(this.vm);
target = null;
return value;
}
update() {
const oldValue = this.value;
this.value = this.get();
this.cb.call(this.vm, this.value, oldValue);
}
}模板编译
将模板转换为渲染函数，解析指令和插值表达式，建立数据与视图的绑定关系。
function compile(template) {
// 解析模板生成AST
const ast = parse(template);
// 优化AST
optimize(ast);
// 生成渲染函数
const code = generate(ast);
return new Function(`with(this){return ${code}}`);
}虚拟DOM与Diff算法
通过虚拟DOM减少直接操作真实DOM的开销，使用Diff算法高效更新视图。
function patch(oldVnode, vnode) {
if (sameVnode(oldVnode, vnode)) {
patchVnode(oldVnode, vnode);
} else {
const parentElm = oldVnode.elm.parentNode;
parentElm.insertBefore(createElm(vnode), oldVnode.elm);
parentElm.removeChild(oldVnode.elm);
}
return vnode.elm;
}生命周期管理
实现组件生命周期钩子，在适当的时间点触发创建、更新、销毁等操作。
function callHook(vm, hook) {
const handlers = vm.$options[hook];
if (handlers) {
handlers.call(vm);
}
}以上步骤构成了 Vue VM 的基本实现框架。实际 Vue.js 源码更为复杂，包含更多优化和边界情况处理。
