响应式篇梗概
文件结构
-
src
-
reactivity - 响应式系统文件
-
test - 单元测试文件(文件名对应各个功能的测试)
-
computed.spec.ts
-
effect.spec.ts
-
reactive.spec.ts
-
readonly.spec.ts
-
ref.spec.ts
-
shallowReadonly.spec.ts
-
-
computed.ts - 实现computed
-
effect.ts - 实现effect、track、trigger...
-
reactive.ts - 实现reactive、isReactive...
-
ref.ts - 实现ref、isRef...
-
baseHandle.ts - 具体实现模块抽象出的构造方法或函数
-
-
share - 工具方法
- index.ts
-
文件内实现的具体方法/类
每个文件中包含哪些方法或类在这里说明
-
reactive.ts
-
reactive
-
readonly
-
createActiveObject
-
ReactiveFlags
-
isReactive
-
isReadOnly
-
shallowReadonly
-
isProxy
-
-
effect
-
ReactiveEffect
-
cleanUpEffect
-
track
-
trackEffects
-
isTracking
-
effect
-
trigger
-
triggerEffects
-
stop
-
-
ref
-
RefImpl
-
convert
-
trackRefValue
-
ref
-
isRef
-
unRef
-
proxyRef
-
-
computed
-
ComputedRefImpl
-
computed
-
-
baseHandler
-
createGetter
-
createSetter
-
mutableHandles
-
readonlyHandles
-
shallowReadonlyHandlers
-
-
shart ---> index.ts
-
extend
-
isObject
-
hasChange
-
没法方法/类实现的具体功能
reactive
创建一个响应式对象并返回
readonly
创建并返回一个响应式对象的只读版本
createActiveObject
抽象出的方法
传入原始对象和陷阱函数,返回一个代理对象(从reactive/readonly中抽象出的方法,具有语义化)
ReactiveFlags
这是一个枚举类型的数据
在这里的用法可以理解为JS中的常量,用来标识对象是不是reactive或readonly
isReactive
检查传入的对象是不是一个普通的响应是对象
isReadOnly
检查传入的对象是不是只读的 响应式对象
shallowReadonly
返回一个只读的响应式对象,与readonly不同的是它不会嵌套
isProxy
检查传入的对象是不是一个代理对象
ReactiveEffect
收集依赖时封装的一个类,一个实例表示一个对象的key,它内部包含这个key包含的所有依赖项等一些信息
cleanUpEffect
用来做具体删除依赖的操作
track
收集依赖
trackEffects
收集依赖抽离出的方法,用来做保存依赖的操作
isTracking
是否需要收集依赖
effect
可以当作依赖收集或触发的一个入口
trigger
触发依赖
triggerEffects
触发依赖抽离出的方法,用来做触发的具体操作
stop
停止触发依赖(实际上是删除了依赖,并且在runner再次执行前不再收集依赖)
RefImpl
与 ReactiveEffect 的作用类似,它的一个实例,代表一个基本数据类型的响应式对象,内部包含这个数据对应的所有依赖等信息
convert
判断传入的值是不是对象,如果是对象返回它的响应式版本,否则直接返回
trackRefValue
收集ref数据的依赖
ref
返回一个传入值的响应式版本
isRef
判断传入的值是不是ref
unRef
返回一个ref数据的原始值,如果不是ref,则直接返回
proxyRef
返回一个ref的代理对象,更方便的操作(省去.value)ref数据
createGetter
从reactive/readonly陷阱函数的getter中抽象出来的方法,根据参数不同创建不同类型的getter
createSetter
与 createGetter 同理,根据参数不同创建不同类型的setter
mutableHandles
reactive的陷阱函数
readonlyHandles
readonly的陷阱函数
shallowReadonlyHandlers
shallowReadonly的陷阱函数
ComputedRefImpl
用来实现 computed 的类,它的一个实例表示一个computed,里面包含这个 computed 实现的必要信息,比如是否有缓存、缓存的值是什么、读取 computed 时执行的getter方法
computed
创建并返回一个computed