Vue3源码:app.mount

78 阅读1分钟

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队列执行