vue3源码架构图
2022-04-06 18:36:18 0 举报vue3源码架构图
作者其他创作
大纲/内容
createRenderer
isStatefulComponent
baseCreateRenderer
为vue实例app初始化属性和方法：_props、_container、_context、config、use、minix、component、directive、mount、unMount、provide等;并 return app
created
updateComponent
unmount()卸载当前组件
queuePostRenderEffect
processElement
mount()
componentEffect
给vue组件挂载optionsminixs、extends、extendsOptions、data、computed、methods、watch、provide、inject、components、directives
执行 instance.update()该update函数就是在setupRenderEffect函数中执行effect(fn)方法的返回值
setupComponent组件实例属性，选项处理合并和处理根实例初始化，类似于vue2中this._init()
patch
compiler:解析parse 转换transform 生成generate
getBaseTransformPreset
appOptions
不存在
render
mount()里面isMounted=truemounted
flushPreFlushCbs
首次挂载
走到组件mount('#app');然后进入app.mount方法
patchChildren
unmountChildren/mountChildren
主逻辑
app.mount
vnode是否存在
createAppAPI
compileToFunction()得到vnode的render函数并赋值给Component.render、instance.render
run
true(非首次)
n1是否存在
const nextTree=renderComponentRoot(instance)const prevTree=instance.subTreeinstance.subTree=nextTree
setupRenderEffect()初始化渲染函数副作用
mountElement
flushJobs
patchElement
unmount() n1将老vnode卸载
mountComponent
!instance.isMounted
patch():补丁算法：init 、update
queueFlush
存在
processComponent
initSlots
mountChildren
patch里面的逻辑
unmount()/递归调用patch
initProps
经过compiler处理之后得到这样的字符串
set
queueJob
n1 && sameVNode?
processFlagment
shouldUpdateComponent
数据更新
reactiveEffect
createApp
font color=\"#b71c1c\
compile&&Component.template&&!Component.render
ensureRenderer
绑定上下文vnode.appContext=context
effect()
renderCommponentRoot
执行render获取vnodeconst subTree=(instance.subTree=renderComponentRoot(instance))
createCommponentInstance创建组件实例1、获取type2、获取上下文3、声明instance4、return instance
beforeCreate
render不存在
//lifecyclebeforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestory、beforeUnmount、destoryed、unmounted、render、renderTracked、renderTiggered、errorCaptured
hostInsert
根据n2 type为：Text、Comment、Static、Fragment还是组件将Vnode转换为真是Dom
finshComponentSetup开始编译过程
tigger
createBlock收集动态属性
0 条评论
下一页
