「这是我参与2022首次更文挑战的第25天,活动详情查看:2022首次更文挑战」。
深入
通过前面的了解,我们由之而生了一些疑问,执行时刻?为什么在setup中没有created的生命周期的钩子?属性的上下文是怎么获得的?即传入setup参数有,props和 ctx,他们从何而来,又是什么?它和其他data之间是什么关系,如果data和这些数据发生冲突,他们能共存么,Vue3处理时候的行为是什么?还有就是setup中的生命周期Vue中是怎么来处理的。
我们这里讲前两个部分的知识,剩下的下期再来,欢迎大家关注这一系列文章ing~
执行的时刻?
要解决上面的三个问题,我们接下来是一定要深入源码来了解了。我们要从源码的哪里开始呢?首先我们先来了解一下代码的运行,如果我们来仔细的探究,我们的起始点很有可能是从挂载开始的
从mounted开始 —> mounted中执行了render —> render内部首次执行了patch —> patch内部首次执行了processComponent(一切东西起始的开始,根组件初始化的开始)
我们从processComponent开始,在vsCode中搜索
进入后下一步 mountComponent
继续下一步:
mountComponent第一步是创建组件实例,然后就是组件实例初始化setupComponent(init)
从代码可以看出,setup的执行是在创建组件之后,我们继续向下研究,
setupComponent中
继续查看结果处理函数
在结果处理函数中,我们可以看出,实际中代码会对返回的类型进行处理,也就是我们实际是可以在setup方法中返回一个function类型的渲染函数。
继续看下面的兼容操作:
这里我们可以看出,对option API的兼容是在setup之后的,也就是说,setup的运行时间是早于 生命周期方法的。因此setup中没有create有两层含义,一:setup早于生命周期,没必要使用create。
还有一层含义实际上是 :setup是另一套设计体系,我们要能够理解。
setup的参数是什么?
接下来我们来解决下一个问题,
我们这里继续着重观察的就是内部的setup
最终进入createSetupContext,我们会看到:
我们创建出来的steupContext是:attrs、slots、emit、exports(暴露接口),至此,以上问题解决。