当前位置：首页 > VUE

vue源码实现分析

2026-02-19 19:47:25VUE

Vue 源码实现分析

Vue.js 是一个渐进式 JavaScript 框架，其源码设计精巧，模块化清晰。以下从核心模块、响应式系统、虚拟 DOM 和编译器等角度分析其实现原理。

响应式系统

Vue 的响应式系统基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。通过劫持数据的读取和修改，触发依赖收集和派发更新。

依赖收集：
在 getter 中调用 dep.depend()，将当前 Watcher 添加到依赖列表。
每个响应式数据关联一个 Dep 实例，用于管理依赖。
派发更新：
在 setter 中调用 dep.notify()，通知所有依赖的 Watcher 执行更新。
Watcher 通过调度队列（如 queueWatcher）实现异步批量更新。

示例代码（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) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 优化渲染性能，核心流程包括：

虚拟节点（VNode）：
用 JavaScript 对象描述 DOM 节点，包含标签名、属性、子节点等信息。
Diff 算法：
对比新旧 VNode 树，最小化 DOM 操作。
采用同层比较策略，通过 patch 函数递归处理节点更新。
对子节点列表采用“双端比较”算法（Vue 2）或“快速路径”优化（Vue 3）。

示例 Diff 核心逻辑：

vue源码实现分析

function updateChildren(parentElm, oldCh, newCh) {
  let oldStartIdx = 0, newStartIdx = 0;
  let oldEndIdx = oldCh.length - 1, newEndIdx = newCh.length - 1;
  // 双指针比较逻辑...
}

模板编译

Vue 将模板编译为渲染函数，流程分为三步：

解析（Parse）：
将模板字符串转换为 AST（抽象语法树），处理指令、插值等语法。
优化（Optimize）：
标记静态节点，减少 Diff 过程中的比较开销。
生成（Generate）：
将 AST 转换为可执行的渲染函数代码字符串。

示例编译输出：

vue源码实现分析

// 模板: <div>{{ message }}</div>
function render() {
  return _c('div', [_v(_s(message))]);
}

组件系统

Vue 组件基于原型继承实现，核心机制包括：

组件定义：
通过 Vue.extend 或 options 对象定义组件配置（如 data、methods）。
生命周期管理：
在特定阶段（如 created、mounted）触发钩子函数，由 callHook 方法调用。
父子通信：
props 通过响应式代理实现父到子数据传递；
$emit 通过事件中心（$on/$off）实现子到父通信。

异步更新队列

Vue 通过 nextTick 实现异步批量更新，优化性能：

使用微任务（如 Promise.then）或宏任务（如 setTimeout）调度更新。
通过 queueWatcher 将同一事件循环内的 Watcher 去重后批量执行。

示例 nextTick 实现：

let callbacks = [];
function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    Promise.resolve().then(flushCallbacks);
  }
}
function flushCallbacks() {
  callbacks.forEach(cb => cb());
}