createApp:
`createApp`:
`ensureRenderer().createApp(...args)`: 获取渲染器,执行createApp函数创建app实例
`app.mount`:挂载mount函数
mount:
`app.mount`:
`normalizeContainer`:获取真实dom ("#app")
`mount`:
`createVNode`:
`createBaseVNode`:
`normalizeChildren`:将子节点转化为数组
`render`:
`patch`:通过判断shapeFlag判断vnode类型,执行不同函数
`processComponent`:shapeFlag & 6(函数式组件或子节点是文本)
`mountComponent`:
`createComponentInstance`:创建instance
`registerHMR`:收集热更新hash值
`setupComponent`:
`initProps`:
`setFullProps`:props和attrs分开
`initSlots`:
`setupRenderEffect`:
`new ReactiveEffect`:生成effect实例
`# effect.onTrack`:(rtc)onRenderTracked生命周期
`# effect.onTrigger`:(rtg)onRenderTriggered生命周期
`update`:执行effect.run()
`effect.run()`:
`componentUpdateFn`:
`normalizeVNode`:
`render.call`:
`sfc_render`:生成vnode树
`invokeArrayFns(bm)`:onBeforeMount生命周期
`patch`:
`queuePostRenderEffect()`:收集onMounetd
`processElement`:shapeFlag & 1 (普通html元素)
`mountElement`:
`el = vnode.el = hostCreateElement()`:创建真实dom
`setElementText`:shapeFlag & 8(子节点是文本)修改dom内容
`mountChildren`:shapeFlag & 16 (子节点是数组)
`mountChildren`:循环children执行patch
`patch`:
`invokeDirectiveHook`:
`setScopeId`:在dom里插入scopeId(<style scoped>会用到)
# def(el, "__vnode", vnode, true)
# def(el, "__vueParentComponent", parentComponent, true)
`hostInsert`:将dom插入到父dom
`queuePostRenderEffect`:先判断,根组件也插入到#app所有mounted队列执行