vue3执行原理流程

1.初始化流程

创建app进行初始化根据根节点生成vnode，调用render进行组件patch阶段

==在组件进行patch时，根据vnode类型做处理，如果是component类型便做component组件初始化，如果是element类型做element初始化==，下面分两种不同的类型进行讲解初始化过程。

1.创建组件实例

2.初始化props、slot并调用setup函数，将返回值结果添加到组件原型上。

3.如果查询到组件实例上没有render并且template有值，接下来便对template进行编译，最后将编译后的函数赋值给组件render

4.初始化阶段调用setupRenderEffect是第一次调用，那么直接调用render函数获取子组件，触发beforeMount钩子，而后重新进行patch，全部patch完了之后才会调用mount钩子函数

1.通过vnode.type创建对应真实元素

2.对vnode类型进行判断如果是文本直接渲染即可；如果是数组进行遍历对每个元素进行patch

3.将vnode的props绑定到元素的真实DOM上

4.触发beforeMount钩子

5.将创建的元素进行插入

6.最后触发mount钩子函数

在组件初始化过程当中，调用setupRenderEffect在内部创建组件更新函数，而后使用effect函数将更新函数放到调度函数当中，往后内部对响应式数据进行更新后，都会触发修改函数调用，将每次修改动作放到微任务队列里，待轮到微任务执行的时候，全部执行这样不会导致每次调用update函数带来

1.触发当前组件的执行update后重新执行render函数获取最新vnode

2.触发beforeUpdate钩子与onVnodeBeforeUpdate钩子

3.将vnode传进patch，照样会进行类型判断(本小节讲解组件更新流程)

4.通过检测props判断是否需要更新组件，如果需要重新调用patch（这边是递归patch）

5.整个递归patch完成之后执行updated钩子函数

1.触发当前组件的执行update后重新执行render函数获取最新vnode

2.触发beforeUpdate钩子与onVnodeBeforeUpdate钩子

3.执行patch，进入Element组件更新流程

4.对比新旧节点的props，如果不一致则更新dom的props

5.对比children，如果新vnode的children与旧vnode的children都是数组类型那么便进行diff算法比对，如果不是进行判断更新即可