Vue 3 运行机制（底层原理，一看就懂）

学以智用
6 阅读4分钟

你想搞懂 Vue 3 从代码到页面渲染、数据更新、再到销毁的全过程，我用通俗语言 + 核心原理给你讲透，不搞玄学、不堆术语。

Vue 3 的核心运行机制可以浓缩为 4 大阶段 + 2 大核心引擎：

4 阶段：编译 → 挂载 → 更新 → 卸载 2 引擎：响应式系统（Proxy） + 虚拟 DOM + 渲染器

一、先搞懂：Vue 3 两大核心引擎

这是整个运行机制的地基，所有流程都围绕它们转。

1. 响应式引擎（数据驱动视图）

Vue 3 使用 ES6 Proxy 实现响应式（替代 Vue 2 的 Object.defineProperty）。

  • 作用：监听数据的 读取/修改/删除
  • 原理：
    1. 把你的普通数据（ref/reactive）包装成代理对象
    2. 读取数据时 → 收集依赖（记录谁用到了这个数据）
    3. 修改数据时 → 触发更新（通知用到它的地方重新渲染）

一句话：数据变 → 自动通知视图更新

2. 虚拟 DOM + 渲染引擎（高效更新页面）

  • 虚拟 DOM（VDOM）：用 JS 对象模拟真实 DOM，轻量、快
  • 渲染器：负责把 VDOM 变成真实 DOM 渲染到页面
  • Diff 算法：数据更新时，只对比变化的部分，最小化修改 DOM

一句话：不直接操作 DOM，用 JS 对象做对比，只改需要改的地方

二、Vue 3 完整运行流程（4 大阶段）

从你写的代码 → 显示在页面上 → 数据变化 → 销毁，全程如下：

阶段 1：编译阶段（template → 渲染函数）

你写的 <template> 不会直接被浏览器识别，必须先编译。

  1. 编译器把模板编译成 render 函数（虚拟 DOM 生成函数） 
    <div>{{ msg }}</div>
<!-- 编译后变成 -->
render() { return h('div', this.msg) }
  2. 会做优化（Vue 3 独有）：
    • 标记静态节点（永远不变的内容，直接跳过 Diff）
    • 标记动态节点（只对比变化的属性/文本）
    • 提升静态节点（只创建一次，复用）

编译结果：生成可执行的渲染代码，为挂载做准备。

阶段 2：挂载阶段（首次渲染）

执行 createApp(App).mount('#app') 时触发。

完整流程：

  1. 创建组件实例 → 初始化 setup、生命周期、响应式数据
  2. 执行 render 函数 → 生成 虚拟 DOM 树（VDOM）
  3. 渲染器工作：
    • 遍历 VDOM → 创建真实 DOM
    • 把 DOM 插入页面 → 页面首次显示
  4. 依赖收集：
    • 渲染时读取了响应式数据 → 记录“这个数据被组件使用了”
    • 建立 数据 ↔ 视图 的关联

挂载完成：页面显示出来，响应式关系已建立。

阶段 3：更新阶段（数据变 → 视图变）

当你修改 ref/reactive 数据时触发：

  1. 触发代理拦截：Proxy 监听到数据被修改
  2. 派发更新：通知所有“依赖这个数据”的组件
  3. 重新执行 render：生成新的 VDOM 树
  4. Diff 对比：
    • 新老 VDOM 快速对比
    • 只找出变化的节点
  5. 打补丁（Patch）：
    • 渲染器只修改真实 DOM 中变化的部分
    • 不变的内容完全不动

更新完成：视图高效刷新，性能极高。

阶段 4：卸载阶段（组件销毁）

组件消失、路由切换时触发：

  1. 执行 onUnmounted 生命周期
  2. 销毁组件实例
  3. 移除真实 DOM
  4. 清空依赖、取消监听、释放内存
  5. 销毁子组件（递归）

卸载完成：防止内存泄漏。

三、一张图看懂核心链路（极简版）

模板编译 → render函数
     ↓
数据初始化 → 响应式代理（Proxy）
     ↓
执行render → 生成VDOM → 生成真实DOM → 页面显示（挂载）
     ↓
数据修改 → Proxy拦截 → 通知更新
     ↓
重新render → 新VDOM → Diff对比 → 只改变化DOM（更新）
     ↓
组件销毁 → 移除DOM → 释放内存（卸载）

四、Vue 3 相比 Vue 2 的机制升级（重点）

  1. 响应式升级：Proxy 替代 defineProperty
    • 支持数组下标/长度修改
    • 支持对象新增/删除属性
    • 性能更好、支持更多数据类型
  2. 编译优化：静态提升、补丁标记
    • Diff 算法只对比动态部分，速度提升 1.3~2 倍
  3. 按需引入：Tree-Shaking 更小体积
  4. 组合式 API：逻辑复用更友好，运行时更高效

五、最核心的 3 句话总结

  1. Vue 3 是数据驱动：一切从修改数据开始，视图自动更新。
  2. 靠 Proxy 实现响应式：监听数据，收集依赖，触发更新。
  3. 靠虚拟 DOM 高效渲染：不直接操作 DOM，只更新变化部分。
avatar
文章
阅读
粉丝