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

前言
无论是 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）对数据进行劫持，建立依赖收集机制。

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')

四、 总结

1. AST 与 VNode 的区别：

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

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

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