Vue实例挂载过程中发生了什么

挂载指的是在app.mount()调用时的整个过程

流程

• 首先获取挂载点的DOM元素，然后去清空html
• mount
  • 开始创建node元素
  • 触发render函数
    • patch(rootVNode)
      • 处理组件类型（Text，Comment，Fragment，Component）
      • 如果是components，会进行组件的实例化（createComponentInstance->setupComponent），双向绑定过程（setupRenderEffect）
        • 在setupComponent里还会进行初始化Props，slots（initProps，initSlots）

mount

首先会先调用normalizeContainer()获取到dom挂载元素的位置，之后再调用mount去执行挂载

这里的mounted函数会先创建VNode根节点，调用render函数将VNode转换为真实的DOM元素

patch

在初始化的过程中，进行VNode对比，根据得出来的结果创建节点并挂载到DOM中

mountComponent

用于实例化组件，并完成数据与VNode的双向绑定

主要执行了初始化Props属性（initProps），初始化插槽（initSlots），执行setup中的代码内容并到template中的模板编译成render渲染函数，到最后执行onMounted钩子函数，表示已经挂载完毕（如果组件中还有组件，会递归调用patch函数）