当前位置：首页 > VUE

vue 实现原理比较

2026-01-18 09:08:59VUE

Vue 2.x 实现原理

响应式系统
基于 Object.defineProperty 实现数据劫持，通过递归遍历对象的属性，将其转化为 getter/setter。依赖收集通过 Dep 类和 Watcher 类实现，当数据变化时通知依赖更新。

虚拟 DOM
通过 snabbdom 库的简化实现，将模板编译为虚拟 DOM，再通过 diff 算法对比新旧虚拟 DOM，最小化 DOM 操作。

模板编译
将模板字符串通过解析器（Parser）生成 AST（抽象语法树），优化器（Optimizer）标记静态节点，代码生成器（Generator）将 AST 转换为渲染函数。

Vue 3.x 实现原理

响应式系统
使用 Proxy 替代 Object.defineProperty，直接代理整个对象，无需递归初始化，支持动态新增属性和数组索引修改。依赖管理通过 effect 和 track/trigger 实现。

虚拟 DOM 优化
引入静态提升（Hoisting）和补丁标志（Patch Flags），编译时分析动态节点，减少运行时 diff 的开销。

组合式 API
通过 setup 函数和 reactive/ref 等 API，将逻辑关注点按功能组织，替代 Options API 的碎片化问题。

性能对比

Vue 2.x

初始化性能较低（递归劫持所有属性）。
数组修改需通过特殊方法（如 push）触发更新。

Vue 3.x

响应式性能更高（Proxy 惰性劫持）。
编译时优化减少运行时虚拟 DOM 计算量。

代码示例

Vue 2 响应式实现片段

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

Vue 3 响应式实现片段

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