面试题：Vue 实例在挂载过程中发生了什么？

当一个 Vue 实例（或组件）被挂载（mount）时，它会经历一系列内部步骤，从创建实例到最终将虚拟 DOM 渲染为真实 DOM 并插入页面。这个过程主要涉及 beforeMount 和 mounted 两个生命周期钩子。

以下是 Vue 实例在挂载过程中的关键步骤：

1. 调用 `mount` 方法

开发者通过 app.mount('#app') 或组件内部调用 mount 方法来启动挂载过程。
此时，Vue 实例已经创建完成（created 钩子已执行），数据、方法、计算属性等都已初始化。

2. 编译模板（Template Compilation）- 仅限运行时 + 编译器版本

作用：如果使用的是包含编译器的 Vue 版本（如直接通过 <script> 引入的 vue.js），并且模板是以字符串形式提供的（如 template: '<div>{{ message }}</div>' 或在 DOM 中的 <div id="app">{{ message }}</div>），Vue 会将这个模板字符串编译成一个渲染函数 (render function)。
渲染函数：是一个返回虚拟 DOM (VNode) 树的 JavaScript 函数。
注意：如果使用的是单文件组件（.vue）或通过构建工具（Vite/Webpack）开发，模板通常在构建时就已经被预编译成渲染函数，运行时不需要再编译。

3. 执行 `beforeMount` 钩子

触发时机：在挂载开始之前，即在编译模板（如果需要）之后，但在将虚拟 DOM 渲染为真实 DOM 并插入到页面之前。
此时状态：
- 组件的 $el 属性（指向真实 DOM 元素）尚未创建，值为 undefined。
- 模板已经编译成渲染函数。
- 数据 (data)、方法 (methods) 等均已可用。
用途：很少需要在此钩子中操作，因为还无法访问 DOM。可以用于一些挂载前的最后准备。

4. 首次渲染（Initial Render）

执行渲染函数：Vue 调用上一步生成的渲染函数。
创建虚拟 DOM：渲染函数执行后，会创建一个虚拟 DOM 树 (Virtual DOM Tree)。这是一个用 JavaScript 对象描述的、轻量级的 DOM 结构。
将虚拟 DOM 转换为真实 DOM：Vue 的渲染器（Renderer）遍历虚拟 DOM 树，将其转换为浏览器可以理解的真实 DOM 节点。

5. 插入 DOM

Vue 将上一步创建的真实 DOM 节点插入到指定的挂载点（如 #app）中。
此时，组件的 UI 已经在页面上可见。

6. 执行 `mounted` 钩子

触发时机：在实例被挂载到 DOM 后调用。
此时状态：
- 组件的 $el 属性已经存在，并指向挂载的根 DOM 元素。
- 组件的 DOM 已经完全渲染并插入页面。
用途：这是操作真实 DOM、初始化第三方库（如图表、地图）、访问 DOM 几何属性（如 offsetHeight）的理想时机。

挂载过程流程图

graph TD
    A[调用 mount('#app')] --> B[编译模板为渲染函数]
    B --> C[执行 beforeMount 钩子]
    C --> D[执行渲染函数]
    D --> E[创建虚拟 DOM 树]
    E --> F[将虚拟 DOM 转换为真实 DOM]
    F --> G[将真实 DOM 插入页面]
    G --> H[执行 mounted 钩子]

总结

Vue 实例的挂载过程是一个从数据到视图的转换过程：

准备：调用 mount，确保实例已创建。
编译（可选）：将模板字符串编译成渲染函数。
通知：触发 beforeMount 钩子（此时无 DOM）。
渲染：执行渲染函数，创建虚拟 DOM，并生成真实 DOM。
插入：将真实 DOM 插入到页面中。
完成：触发 mounted 钩子（此时 DOM 已就绪，可操作）。

理解这个过程有助于开发者正确地在 mounted 钩子中进行 DOM 操作和第三方库的初始化。

THE END

Vue 基础面试题