前言
无论是 Vue 2 的new Vue()还是 Vue 3 的createApp()，将组件配置转化为页面上可见的真实 DOM，中间经历了一系列复杂的转换。理解这一过程，不仅能帮我们更好地掌握生命周期，更是理解响应式原理的基础。
一、 挂载过程总览
Vue 实例的挂载过程，本质上是将组件配置转化为虚拟 DOM，最终映射为真实 DOM，并建立响应式双向绑定的过程。
二、 核心挂载步骤详解
1. 初始化阶段 (Initialization)
在 Vue 3 中，通过createApp开始。
- 创建实例：根据传入的根组件配置创建一个应用上下文（vue实例），接着进行数据初始化。
- 初始化数据：这是最关键的一步。Vue 会依次初始化Props、Methods、Setup (Vue 3)、Mixins、Data、Computed。
- 校验：Vue 会校验
props和data中的变量名是否重复。 - 响应式绑定：Vue 3 使用
Proxy（Vue 2 使用Object.defineProperty）对数据进行劫持，建立依赖收集机制。
- 校验：Vue 会校验
2. 模板编译阶段 (Template Compile)
这一步将“肉眼可见”的 HTML 模板转化为机器高效执行的 JavaScript 代码。
- 解析 (Parser)：将
template字符串解析为抽象语法树 (AST)。 - 转换 (Transformer)：对 AST 进行静态提升、补丁标记（Patch Flags）等优化。
- 生成 (Generator)：将 AST 转换成render 渲染函数字符串。
3. 生成虚拟 DOM (VNode)
- Vue 调用生成的
render函数。 render函数根据Template执行后会返回一个虚拟 DOM 树 (Virtual DOM)。它是对真实 DOM 的一种轻量级 JavaScript 对象描述。
4. 挂载与 Patch (Mounting & Patching)
- 调用 Mount：执行组件的挂载方法。
- 渲染真实 DOM：渲染器（Renderer）遍历虚拟 DOM 树，递归创建真实的 HTML 元素。
- 更新页面：将生成的真实 DOM 插入到指定的容器（如
#app）中，替换掉原本的内容。
5. 完成挂载
- 一旦真实 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
