vue3挂载和更新流程
2023-09-11 17:58:22 5 举报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
收藏
0 条评论
下一页
