vue3挂载和更新流程

如果组件内部包含多个根

mountElement创建真实的dom

如果是children

如果是元素如：

updateComponent1、调用shouldUpdateComponent方法判断组件是否需要更新2、如果需要，则会调用setupRenderEffect方法中设置的update方法

1、如果新旧vnode完全一致，则直接退出2、如果新旧vnode类型不一致，则卸载旧节点，将旧节点设置为null进行后续逻辑3、span style=\

更新则走这里

如果是文本节点，渲染为真实dom

render

patch

patchElement更新真实的dom

prcessFragment

mounedChildren

setupRenderEffect1、定义componentUpdateFn方法2、定义effect函数，内部调用componentUpdateFn方法3、effect函数挂载到update函数上4、执行update函数，也就是执行componentUpdateFn函数

componentUpdateFn1、先调用render函数生成vnode（此时的vnode不是组件类型了）2、再调用patch函数

……

1、当前节点如果有patchFlag属性，则根据这个属性进行靶向更新2、如果没有这个属性，则全量更新

mountChildren

processComponent

processElement

调用createVnode函数生成vnode传给render函数

mountComponent

创建则走这里

如果是组件类型，如：

其他类型

如果有子节点

hostSetElementText

在setupRenderEffect函数中定义了effect方法，（在属性读取时将属性和读取该属性的effect关联起来，然后在更新该属性时取出该属性关联的effect函数出来执行）也就意味着当响应式数据变化时，就会触发effect函数，就会触发componentUpdateFn函数

mouned

判断vnode是否存在，如果不存在，则卸载之前的vnode，存在则进入patch

1、当前节点子节点如果有dynamicChildren属性，则调用patchBlockChildren方法进行优化更新2、如果没有这个属性，则调用patchChildren进行普通更新，这个方法里面会调用diff算法

1、调用createComponentInstance创建实例2、调用setupComponent对组件实例初始化3、设置和调用有副作用的函数setupRenderEffect