vue3 - mini-vue 响应式篇简单总结

129 阅读3分钟

响应式篇梗概

文件结构

  • 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