前言

在创建一个 Vue 3 项目时，通常会看到三个核心文件： main.js:应用入口 index.html:页面入口 App.vue: 根组件 本文将以这三个文件为例，简述 Vue 应用的初始化流程

流程

在 main.js 中，我们导入了 createApp 函数和根组件 App.vue

一、从入口开始：createApp 与 mount

createApp(App).mount('#app')

createApp(App)调用createApp传入根组件，生成它专属的mount方法

.mount('#app')让createApp(App)这个应用实例挂载到根容器（id为app的盒子），

• mount函数内部会基于根组件App.vue生成一个虚拟节点vnode
• 再调用render函数进行渲染，负责将虚拟DOM渲染到真实DOM

二、创建虚拟节点：vnode 的结构

基于根组件来创建虚拟节点vnode

创建出来的虚拟节点vnode属性如下：

三、渲染入口：render 与 patch

调用 render 函数

1. render函数只是一个渲染器的入口，负责接收接收虚拟节点和容器，开启渲染过程

可以看见render函数内部也主要是调用patch函数，

2. patch()主要会根据vnode.type以及shapeFlag去判断节点属于什么类型，进而调用相应类型的处理方法processxxxx()

这里App是组件类型，所以用processComponent处理

四、处理组件：processComponent 与 mountComponent

3. 不管是什么类型的节点，都会在这个时候判断，这个节点之前是否存在，是选择初始化节点mountxxx()，还是更新节点

由于这是组件首次渲染，调用patch传下来的第一个参数应该是null，即没有n1，

所以到达processComponent之后，会先进行mountComponent

五、组件实例的创建与设置

4. 然后进行相应的流程 mountxxx()/更新节点

mountComponent会先去创建 component instance对象，再调用setupComponent设置组件实例，最后调用setupRenderEffect设置渲染效果。

ps：也是可以粗略的看看instance对象的属性