vue 实现原理比较

Vue 2 实现原理

Vue 2 的核心实现基于响应式系统和虚拟 DOM。响应式系统通过 Object.defineProperty 劫持数据的 getter 和 setter，在数据变化时触发依赖更新。虚拟 DOM 则通过 diff 算法比对变化，高效更新真实 DOM。

• 响应式系统
  初始化时递归遍历 data 对象，为每个属性添加 getter/setter。依赖收集通过 Dep 和 Watcher 实现，每个属性对应一个 Dep，Watcher 在渲染时触发 getter 并订阅 Dep，数据变化时 Dep 通知所有 Watcher 更新。

• 虚拟 DOM
  模板编译为 render 函数，生成虚拟 DOM 树。通过 patch 方法对比新旧虚拟 DOM，计算出最小变更（如节点增删、属性更新），批量更新到真实 DOM。

  

• 模板编译
  模板通过 vue-template-compiler 转换为 render 函数，包含静态优化（标记静态节点避免重复渲染）。

Vue 3 实现原理

Vue 3 在响应式系统和编译优化上做了重大改进，性能显著提升。

• 响应式系统
  使用 Proxy 替代 Object.defineProperty，支持动态添加/删除属性，无需递归初始化。依赖跟踪通过 effect（类似 Watcher）和 ReactiveEffect 实现，Proxy 的 get/set 拦截更高效。

• 虚拟 DOM 优化
  引入 Block Tree 和 Patch Flags：

  • Block Tree：动态节点按结构划分，减少 diff 范围。
  • Patch Flags：标记动态节点类型（如 CLASS、STYLE），跳过静态节点比对。

• 编译优化
  模板编译时生成更高效的 render 函数：

  • 静态提升：将静态节点提取为常量，避免重复创建。
  • 事件缓存：缓存内联事件处理函数，减少不必要的更新。

核心差异对比

代码示例

Vue 2 响应式实现片段

function defineReactive(obj, key) {
  const dep = new Dep();
  let val = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) dep.depend(); // 收集依赖
      return val;
    },
    set(newVal) {
      val = newVal;
      dep.notify(); // 触发更新
    }
  });
}

Vue 3 响应式实现片段

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key); // 依赖收集
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key); // 触发更新
    }
  });
}