当前位置：首页 > VUE

vue内部实现原理

2026-02-20 02:17:09VUE

Vue 的内部实现原理

Vue 的核心实现主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下从关键模块展开说明：

响应式系统

Vue 2.x 使用 Object.defineProperty 实现数据劫持，通过 getter 和 setter 拦截对象属性的访问和修改。每个组件实例对应一个 Watcher，当依赖的数据变化时触发更新。

Vue 3.x 改用 Proxy 实现响应式，解决了 Vue 2.x 无法检测新增属性和数组索引变化的问题。依赖追踪通过 effect 函数和 ReactiveEffect 类实现。

vue内部实现原理

// Vue 3 的响应式简化示例
const targetMap = new WeakMap();
function track(target, key) {
  // 收集依赖
}
function trigger(target, key) {
  // 触发更新
}
const proxy = new Proxy(data, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    trigger(target, key);
  }
});

虚拟 DOM 与 Diff 算法

Vue 将模板编译为虚拟 DOM（VNode），通过 patch 函数对比新旧 VNode 差异。Diff 算法采用同级比较策略：

同层节点比较通过 key 优化复用
双端交叉比对减少移动操作
静态树提升跳过不变部分

// 简化的 VNode 结构
{
  tag: 'div',
  props: { class: 'container' },
  children: [
    { tag: 'span', text: 'Hello' }
  ]
}

模板编译

模板通过以下步骤转换为渲染函数：

vue内部实现原理

解析：将模板字符串转换为 AST（抽象语法树）
优化：标记静态节点用于后续跳过 Diff
生成：将 AST 转换为可执行的渲染函数代码

// 模板示例
<div>{{ message }}</div>

// 编译后的渲染函数
function render() {
  return h('div', this.message);
}

组件化机制

组件实例化过程：

合并选项（mixins、extends 等）
初始化生命周期、事件、渲染函数
建立父子组件关联（$parent/$children）
响应式数据处理（data、computed 等）

组件通信通过 provide/inject 和事件总线（Vue 2）或 mitt（Vue 3）实现跨层级传递。

更新策略

Vue 使用异步更新队列（nextTick）批量处理变更：

数据变化触发 Watcher 入队
通过 Promise.then 或 MutationObserver 异步执行
最终调用 patch 方法更新 DOM

// 更新队列简化实现
let queue = [];
let flushing = false;
function queueWatcher(watcher) {
  queue.push(watcher);
  if (!flushing) {
    Promise.resolve().then(flushQueue);
  }
}
function flushQueue() {
  queue.forEach(watcher => watcher.run());
}