前言
在创建一个 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 函数
- render函数只是一个渲染器的入口，负责接收接收虚拟节点和容器，开启渲染过程
可以看见render函数内部也主要是调用patch函数，
- patch()主要会根据vnode.type以及shapeFlag去判断节点属于什么类型，进而调用相应类型的处理方法processxxxx()
这里App是组件类型，所以用processComponent处理
四、处理组件：processComponent 与 mountComponent
- 不管是什么类型的节点，都会在这个时候判断，这个节点之前是否存在，是选择初始化节点mountxxx()，还是更新节点
由于这是组件首次渲染，调用patch传下来的第一个参数应该是null，即没有n1，
所以到达processComponent之后，会先进行mountComponent
五、组件实例的创建与设置
- 然后进行相应的流程 mountxxx()/更新节点
mountComponent会先去创建 component instance对象，再调用setupComponent设置组件实例，最后调用setupRenderEffect设置渲染效果。 
ps：也是可以粗略的看看instance对象的属性 