Vue3 组件初始化流程深入分析：验证对 `createApp` 和 `mount` 的推测，总结初始化流程

2023-12-19 22:25:17

前言

在 Vue3 组件初始化流程（二）：深入剖析 createApp 和 mount 一文中，我们对 createApp 和 mount 的初始化流程进行了初步分析。本篇我们将进一步验证我们的推测，并全面总结组件初始化流程，为深入理解 Vue3 源码奠定基础。

搭建验证环境

为了验证我们的分析，我们将在 packages/vue/example 目录下新建一个文件 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="main.js"></script>
</body>
</html>

并在 main.js 中编写如下代码：

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
})

app.mount('#app')

验证分析

`createApp` 阶段

通过分析 createApp 的源码，我们推测其主要完成以下操作：

初始化选项合并
创建根组件实例
设置代理

通过在 createApp 函数中添加一些调试信息，我们可以验证我们的推测：

import { createApp } from 'vue'

console.log('Before createApp options merge')
const app = createApp({
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
})
console.log('After createApp options merge')

console.log('Before createApp root component instance')
app.mount('#app')
console.log('After createApp root component instance')

运行 index.html，我们在控制台中可以看到如下输出：

Before createApp options merge
After createApp options merge
Before createApp root component instance
After createApp root component instance

这验证了我们的推测，createApp 确实在初始化阶段执行了这些操作。

`mount` 阶段

我们还推测 mount 阶段主要完成以下操作：

初始化渲染
触发 beforeMount 生命周期钩子
执行模板编译
触发 mounted 生命周期钩子

同样，我们可以在 mount 函数中添加调试信息来验证我们的推测：

app.mount('#app')

console.log('Before mount initialize render')
app._update()
console.log('After mount initialize render')

console.log('Before mount trigger beforeMount')
app._mounted()
console.log('After mount trigger beforeMount')

console.log('Before mount compile template')
app.$forceUpdate()
console.log('After mount compile template')

console.log('Before mount trigger mounted')
app._updated()
console.log('After mount trigger mounted')

运行 index.html，我们在控制台中可以看到如下输出：

Before mount initialize render
After mount initialize render
Before mount trigger beforeMount
After mount trigger beforeMount
Before mount compile template
After mount compile template
Before mount trigger mounted
After mount trigger mounted