08-Vue3.0源码阅读之Composition API探究(中)

238 阅读2分钟

「这是我参与2022首次更文挑战的第25天,活动详情查看:2022首次更文挑战」。

深入

通过前面的了解,我们由之而生了一些疑问,执行时刻?为什么在setup中没有created的生命周期的钩子?属性的上下文是怎么获得的?即传入setup参数有,props和 ctx,他们从何而来,又是什么?它和其他data之间是什么关系,如果data和这些数据发生冲突,他们能共存么,Vue3处理时候的行为是什么?还有就是setup中的生命周期Vue中是怎么来处理的。

我们这里讲前两个部分的知识,剩下的下期再来,欢迎大家关注这一系列文章ing~

执行的时刻?

要解决上面的三个问题,我们接下来是一定要深入源码来了解了。我们要从源码的哪里开始呢?首先我们先来了解一下代码的运行,如果我们来仔细的探究,我们的起始点很有可能是从挂载开始的

从mounted开始 —> mounted中执行了render —> render内部首次执行了patch —> patch内部首次执行了processComponent(一切东西起始的开始,根组件初始化的开始)

我们从processComponent开始,在vsCode中搜索

image.png

进入后下一步 mountComponent

image.png

继续下一步:

image.png

mountComponent第一步是创建组件实例,然后就是组件实例初始化setupComponent(init)

从代码可以看出,setup的执行是在创建组件之后,我们继续向下研究,

setupComponent中

image.png

继续查看结果处理函数

image.png

在结果处理函数中,我们可以看出,实际中代码会对返回的类型进行处理,也就是我们实际是可以在setup方法中返回一个function类型的渲染函数。

继续看下面的兼容操作:

image.png

这里我们可以看出,对option API的兼容是在setup之后的,也就是说,setup的运行时间是早于 生命周期方法的。因此setup中没有create有两层含义,一:setup早于生命周期,没必要使用create。

还有一层含义实际上是 :setup是另一套设计体系,我们要能够理解。

setup的参数是什么?

接下来我们来解决下一个问题,

我们这里继续着重观察的就是内部的setup

image.png

最终进入createSetupContext,我们会看到:

image.png

我们创建出来的steupContext是:attrs、slots、emit、exports(暴露接口),至此,以上问题解决。