当前位置：首页 > VUE

vue实现mvvm思路

2026-01-18 22:12:20VUE

Vue 实现 MVVM 的思路

Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是其核心实现思路：

数据劫持与响应式

Vue 使用 Object.defineProperty 或 Proxy（Vue 3）劫持数据对象的属性，在属性被访问或修改时触发 getter 和 setter。通过依赖收集（Dep）和观察者（Watcher）机制，实现数据的响应式更新。

// 简化版数据劫持示例
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(); // 通知所有 Watcher 更新
    }
  });
}

模板编译

Vue 将模板解析为 AST（抽象语法树），并生成渲染函数。通过指令解析（如 v-model、v-for）和数据绑定，将模板中的动态部分与数据关联起来。

// 简化的模板编译示例
function compile(template) {
  const ast = parse(template); // 解析为 AST
  const code = generate(ast);  // 生成渲染函数代码
  return new Function(`with(this){return ${code}}`);
}

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 优化渲染性能。数据变化时，生成新的虚拟 DOM，并通过 Diff 算法比对差异，最终高效更新真实 DOM。

// 简化的虚拟 DOM 示例
function createVNode(tag, data, children) {
  return { tag, data, children };
}

function patch(oldVNode, newVNode) {
  // Diff 算法实现
  if (oldVNode.tag !== newVNode.tag) {
    // 替换节点
  } else {
    // 更新属性或子节点
  }
}

双向数据绑定

v-model 是语法糖，本质是 :value 和 @input 的组合。通过监听输入事件更新数据，再触发响应式系统更新视图。

// 简化的 v-model 实现
function bindModel(el, vm, exp) {
  el.addEventListener('input', (e) => {
    vm[exp] = e.target.value; // 数据更新
  });
  new Watcher(vm, exp, (value) => {
    el.value = value; // 视图更新
  });
}

依赖收集与派发更新

Dep：管理依赖的容器，每个响应式属性对应一个 Dep。
Watcher：观察者，在数据变化时执行回调（如更新视图）。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) { this.subs.push(sub); }
  notify() { this.subs.forEach(sub => sub.update()); }
}

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    Dep.target = this;
    this.value = vm[exp]; // 触发 getter，收集依赖
    Dep.target = null;
  }
  update() {
    const newValue = this.vm[this.exp];
    if (newValue !== this.value) {
      this.cb(newValue);
      this.value = newValue;
    }
  }
}