码系列文章目录

一、vue3中createApp()实例是如何创建的实例是什么样子的

其调用了工厂函数ensureRenderer()内部的createApp函数

进入ensureRenderer

3、ensureRenderer()工厂函数内容据说是vue3中最多的,纠结过程容易迷路此处直接跳转到该工厂函数返回的结果

4、找到createAppApi()

第一步生成vnode传递给patch函数转换成dom,然后将其添加到宿主上

三、patch状态更新流程

单点产看更新最终走trigger通过!hadkey判断其走trigger

Add(添加),

6、走triggerEffect后进入effect.schedule查看其如何更新

7、单点进入,

学习源码的笔记以及vue3源码学习过程的问题、思路、总结。

知识是容易遗忘的让其留下痕迹方便以后回顾学习。

一、vue3中createApp()实例是如何创建的实例是什么样子的

其调用了工厂函数ensureRenderer()内部的createApp函数

进入ensureRenderer

3、ensureRenderer()工厂函数内容据说是vue3中最多的,纠结过程容易迷路此处直接跳转到该工厂函数返回的结果

4、找到createAppApi()

createAppAPIHostElement(render:

RootRenderFunctionHostElement,hydrate?:

RootHydrateFunction

{installedPlugins.add(plugin)plugin.install(app,

...options)}

{installedPlugins.add(plugin)plugin(app,

...options)}

(!context.mixins.includes(mixin))

else

{validateDirectiveName(name)}if

(!directive)

vnode.componentdevtoolsInitApp(app,

version)}return

getExposeProxy(vnode.component!)

else

nulldevtoolsUnmountApp(app)}delete

else

{installAppCompatProperties(app,

context,

第一步生成vnode传递给patch函数转换成dom,然后将其添加到宿主上

app.mount(#app)

initial-scale1.0titleDocument/title/head

bodydiv

更新流程/h1p{{counter}}/pcomp/comp/divscript

src../dist/vue.global.js/scriptscript//

vue2:

单点产看更新最终走trigger通过!hadkey判断其走trigger

Add(添加),

6、走triggerEffect后进入effect.schedule查看其如何更新

7、单点进入,

更新走componentUpdateFn所以断点要提前打在componentUpdateFn的elese

update上

setup生命周期钩子getCurrentInstanceprovide/inject

问题1

patch内部调用processComponent跟组件初始化开始

从这开始

进入后首先创建了实例instance,然后进行组件实例初始化setupComponent(instance)

进入组件初始化列表

就可以看到context中为什么有四个属性且为什么attrs是只读的

export

createAttrsProxy(instance))},get

slots()

shallowReadonly(instance.slots)},get

emit()

createAttrsProxy(instance))},slots:

instance.slots,emit:

ComponentInternalInstance,setupResult:

unknown,isSSR:

首先判断返回的结果是不是函数//如果是函数则作为render函数处理if

{//

ComponentOptions).__ssrInlineRender)

{//

{instance.devtoolsRawSetupState

setupResult}//

将来组件渲染函数中会首先从setupState中获取值instance.setupState

(__DEV__)

{exposeSetupStateOnRenderContext(instance)}}

else

apifinishComponentSetup(instance,

isSSR)

查看finishComponentSetup(instance,

isSSR)

执行时刻beforeCreate之类的传统生命周期钩子实际上setup函数执行的时候组件实例已经创建了所以setup中处理beforeCreate和created是没有意义的。

问题2

如果和data这些数据发生冲突他们能共存吗Vue3处理时的行为

五、Vue3