Vue-实例从 createApp 到真实 DOM 的挂载全历程

前言

无论是 Vue 2 的 new Vue() 还是 Vue 3 的 createApp()，将组件配置转化为页面上可见的真实 DOM，中间经历了一系列复杂的转换。理解这一过程，不仅能帮我们更好地掌握生命周期，更是理解响应式原理的基础。

一、挂载过程总览

Vue 实例的挂载过程，本质上是将组件配置 转化为虚拟 DOM ，最终映射为真实 DOM ，并建立响应式双向绑定的过程。

二、核心挂载步骤详解

初始化阶段 (Initialization)

在 Vue 3 中，通过 createApp 开始。

创建实例：根据传入的根组件配置创建一个应用上下文（vue实例），接着进行数据初始化。
初始化数据 ：这是最关键的一步。Vue 会依次初始化 Props、Methods、Setup (Vue 3)、Mixins、Data、Computed 。
- 校验：Vue 会校验 props 和 data 中的变量名是否重复。
- 响应式绑定 ：Vue 3 使用 Proxy（Vue 2 使用 Object.defineProperty）对数据进行劫持，建立依赖收集机制。

模板编译阶段 (Template Compile)

这一步将"肉眼可见"的 HTML 模板转化为机器高效执行的 JavaScript 代码。

解析 (Parser) ：将 template 字符串解析为 抽象语法树 (AST) 。
转换 (Transformer) ：对 AST 进行静态提升、补丁标记（Patch Flags）等优化。
生成 (Generator) ：将 AST 转换成 render 渲染函数 字符串。

生成虚拟 DOM (VNode)

Vue 调用生成的 render 函数。
render 函数根据Template执行后会返回一个 虚拟 DOM 树 (Virtual DOM) 。它是对真实 DOM 的一种轻量级 JavaScript 对象描述。

挂载与 Patch (Mounting & Patching)

调用 Mount：执行组件的挂载方法。
渲染真实 DOM：渲染器（Renderer）遍历虚拟 DOM 树，递归创建真实的 HTML 元素。
更新页面 ：将生成的真实 DOM 插入到指定的容器（如 #app）中，替换掉原本的内容。

完成挂载

一旦真实 DOM 渲染完毕，Vue 会触发 mounted （组合式 API 为 onMounted）生命周期钩子，此时开发者可以安全地访问 DOM 节点。

三、 Vue 3 挂载示例

在 Vue 3 项目中，挂载通常发生在 main.ts。

// main.ts import { createApp } from 'vue' import App from './App.vue' // 1. 创建应用实例 const app = createApp(App) // 2. 挂载到指定 DOM 容器 // 挂载过程中会执行编译、数据拦截、生成 VNode 并渲染 app.mount('#app')

四、总结

AST 与 VNode 的区别：

AST：是对 HTML 语法的描述，用于代码编译阶段。
VNode：是对 DOM 节点的描述，用于运行时渲染和 Diff 算法。

双向绑定的建立时机 ：在 data 初始化阶段，Vue 就已经通过响应式 API 拦截了数据。当 render 函数读取数据时，会自动触发依赖收集。
重新挂载 ：如果响应式数据发生变化，Vue 不会重新走一遍完整的挂载过程，而是通过 Diff 算法 对比新旧 VNode，仅更新发生变化的真实 DOM 部分。

原文： https://juejin.cn/post/76018118