09-Vue3.0源码阅读之Reactivity API流程深入

149 阅读2分钟

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

学习这组API我们可以先给自己提出几个问题,前面我们根据文档,大概浏览了Reactive的API都有什么,接下来我们就根据基础API,来为自己提出疑问。

1、什么是响应式数据?

2、为什么数据是响应式的时候,他们变化的话数据就会更新?

3、ref是如何实现的,为什么它需要一个value?

4、watch底层如何实现?

5、computed返回值是什么类型?

响应式数据

官方文档中其实有提到一个定义:“数据变化可以被检测,同时会响应数据的变化”

在实际使用中,我们常用的reactive()、ref()实际上指代的就是响应式数据

更新原因

要了解响应式数据变化更新原因这个问题,我们必须要继续深入下去,首先先找到reactive方法的具体位置,详情如下图:

image.png

image.png

进入后我们可以从第87行查看reactive的定义,从图中可以看出,reactive接收一个范型,返回类型是继承自object的范型,然后呢,进行创建响应式对象createReactiveObject,这里我们可以知道如何将一个对象从普通对象转换为响应式对象。

image.png

这里创建了一个代理对象,并且将传入的原始对象作为了代理目标。

入参targetType中会判断,类型是否为set之类的新类型,是则运行前面,否则使用basehandlers。

我们先重点关注baseHandlers

从方法中可以看出来,baseHandlers会入参传进来,入参变量是:mutableHandlers,这里指代普通对象,大概样式是这样:

image.png

至此,整个reactive部分的代码已经走完。

接下来我们可以使用之前学习过的断点调试的方法来进行一个从上至下的运行流程的一个调试,只需要在reactive的地方打上断点即可。

具体流程如下

image.png

小伙伴可以自己走走看哦~~~