Vue进阶系列第5篇--Vue实例挂载的过程中发生了什么?

Last updated on December 28, 2025 pm

大家好，我是jvxiao。

这是Vue从入门到精通系列文章的第5篇，今天我们来谈谈剖析一下Vue实例挂载过程中发生了什么。

Vue实例（也可以叫组件）的挂载，说到底就是把我们写的Vue代码，变成页面上能看到、能交互的真实元素的过程。这个过程看似复杂，其实一步步拆解开，都是很朴素的逻辑，尤其是我们常用的Vue 3（比如Nuxt 3背后的核心），挂载流程更是清晰明了。

一、创建应用实例

在Vue 3里，没有以前那种全局的Vue实例了，而是用createApp函数来创建一个应用实例。比如说我们导入根组件App.vue后，调用createApp(App)，就相当于搭好了一个项目的“架子”。

这个架子里会包含全局配置，比如我们注册的全局组件、自定义指令这些，但这时候还没和页面上的任何元素产生关联，只是一个单纯的配置集合。我们可以在这个阶段给架子添点东西，比如注册全局能用的按钮组件，或者定义一个全局指令，这些都会在后续挂载时生效。

二、调用mount方法

接下来就是触发挂载的关键一步——调用mount方法。我们会把mount绑定到页面上一个指定的DOM元素上，通常是#app，比如app.mount('#app')。

这一步就像是告诉Vue：“我已经搭好架子了，现在要把内容放到这个容器里”。Vue会先找到这个#app对应的真实DOM元素，检查一下它是不是合法的——不能是<body>或者<html>标签，不然会覆盖整个页面，必须是一个普通的div之类的元素。确认没问题后，就准备开始后续的渲染工作。

三、模板编译

我们写的Vue模板，比如<template><div>{{ msg }}</div></template>，电脑是看不懂的，Vue得把它转换成能执行的代码，这个过程就是编译。

编译的时候，Vue会先把模板解析成一个抽象的结构（不用深究专业名词，知道是对模板的结构化描述就行），把里面的插值{{}}、指令v-bind v-on、循环v-for这些特殊语法都识别出来。接着会优化这个结构，比如哪些内容是固定不变的（像纯文本“欢迎访问”），就标记为静态内容，后续更新时不用重复处理，能省不少性能。最后，把优化后的结构转换成一个render函数，这个函数的作用就是生成虚拟DOM。

四、生成虚拟DOM

说到虚拟DOM（VNode），其实它一点不玄乎，就是一个普通的JavaScript对象，用来描述真实DOM长什么样。比如一个div标签，虚拟DOM里会记录它的标签名是“div”、有哪些属性、里面包含什么子元素。

当render函数执行后，就会生成这样的虚拟DOM对象，而且是一个嵌套结构——根组件的虚拟DOM里，会包含所有子组件的虚拟DOM，就像搭积木一样，一层套一层。

五、渲染真实DOM

有了虚拟DOM，接下来就是把它变成真实DOM。Vue里有个核心的patch函数，它的工作就是“翻译”虚拟DOM。

首先根据虚拟DOM的标签名，创建对应的真实DOM元素，比如虚拟DOM是div，就用document.createElement('div')创建一个真实的div。然后给这个真实元素设置属性和事件，比如绑定的点击事件、class样式这些。接着递归处理所有子虚拟DOM，把它们都转换成真实的子元素，一个个插入到父元素里。最后，把这棵完整的真实DOM树，插入到之前指定的#app容器中，这时候页面上就能看到我们写的内容了。

六、生命周期钩子

在整个挂载过程中，还会触发两个重要的生命周期钩子：onBeforeMount和onMounted。这两个钩子就像两个时间节点，告诉我们挂载到哪一步了。

onBeforeMount是在真实DOM挂载到页面之前触发的，这时候虚拟DOM已经生成，但页面上还看不到东西，这时候修改数据不会触发额外的更新；onMounted则是在真实DOM完全挂载完成后触发的，这时候页面上已经能看到渲染好的内容了，适合做一些需要操作DOM的事情，比如初始化一个图表插件，或者给某个元素绑定第三方的事件。需要注意的是，父组件的onMounted可能会比子组件的先触发，因为父组件先挂载完成，子组件还在后续处理中。

七、激活响应式

最后一步是响应式系统的激活。挂载完成后，我们用ref或reactive定义的响应式数据，就和视图建立了联系。

比如我们把msg的值改成“你好”，Vue会立刻察觉到这个变化，重新执行render函数生成新的虚拟DOM，然后和旧的虚拟DOM对比，只把变化的部分更新到真实DOM上，而不是整个页面重新渲染，这样既高效又不会影响其他内容。

总结

总的来说，Vue实例的挂载过程可以简单概括为：先搭好应用的架子，指定挂载的容器，把模板翻译成可执行的代码，生成虚拟DOM描述页面结构，再把虚拟DOM变成真实DOM显示在页面上，同时激活响应式，让数据变化能自动更新视图。每一步都是环环相扣，最终实现了从代码到页面的落地。