导读部分
本篇文章记录Vue3源码中对核心响应式部分(reactivity)的理解
分享在看vue3的reactivity的笔记，源码建议阅读顺序：__test__ -> ref -> reactive -> effect -> computed
Ref模块
Ref模块主要提供的Api就是ref,ref接收到Object的话会对这个值进行reactive转换。ref会返回一个新对象，新对象的value会被劫持触发track事件和trigger事件。track事件和trigger事件先了解一下，一个是收集依赖，另一个是触发事件将依赖中的effect调用
const convert = (val: any): any => (isObject(val) ? reactive(val) : val)
export function ref<T extends Ref>(raw: T): T
export function ref<T>(raw: T): Ref<T>
export function ref(raw: any) {
//如果传入的参数是Ref类型则结束函数
if (isRef(raw)) {
return raw
}
//如果不是对象则返回raw，是对象则进行reactive数据转换
raw = convert(raw)
const v = {
[refSymbol]: true,
get value() {
// 触发track事件
track(v, OperationTypes.GET, '')
return raw
},
set value(newVal) {
//将新数据转换
raw = convert(newVal)
// 触发trigger事件
trigger(v, OperationTypes.SET, '')
}
}
return v as Ref
}
模块定义了Ref接口，规定Ref类型必须有两个key，一个是用来识别Ref类型的symbol，另一个则是Ref的value，前者是通过isRef来检测是否为Ref类型的符号，后者是Ref的值，值得一提的是这个value的类型UnwrapRef
// 递归解开嵌套值绑定，泛型T的条件判断
export type UnwrapRef<T> = {
//如果是ref类型，继续解套
ref: T extends Ref<infer V> ? UnwrapRef<V> : T
//如果是数组,循环解套
array: T extends Array<infer V> ? Array<UnwrapRef<V>> : T
//如果是对象，遍历解套
object: { [K in keyof T]: UnwrapRef<T[K]> }
//停止解套
stop: T
}[T extends Ref
? 'ref'
: T extends Array<any>
? 'array'
: T extends BailTypes
? 'stop' // 避免不应该解包的类型
: T extends object ? 'object' : 'stop']
如果是一个引用类型的话会解套检查其嵌套值，但它会避开解套Function，Set，Map，WeakSet，WeakMap。
这个模块还导出了一个toRefs方法，这个方法是用来将Reactive对象复制，返回浅复制后的新对象可供解构赋值。结构赋值后的变量是Ref类型
Reactive模块
reactive模块的核心API是reactive和readonly，这两个方法是将对转换为响应式对象的方法。
它还引入了四个重要的处理程序：mutableHandlers和readonlyHandlers以及针对非常规对象的程序mutableCollectionHandlers和readonlyCollectionHandlers。前两个程序的作用是对reactive或readonly常规对象的操作进行拦截并插入track和trigger事件，后两个程序的作用是对reactive或readonly的Set, Map, WeakMap, WeakSet对象的操作进行拦截并插入track和trigger事件
reactive模块的内部拥有七个记录集合:
{raw < - > reactive}：Map结构，记录raw原生数据的reactive响应式数据
{reactive < - > raw}：Map结构，记录reactive响应式数据的raw原生数据
{raw < - > readonly}：Map结构，记录raw原生数据的readonly只读响应式数据
{readonly < - > raw}：Map结构，记录readonly只读响应式数据的raw原生数据
{readonlyValues}：Set结构，记录那些需要转换成只读响应式数据的对象
{nonReactiveValues}：Set结构，记录那些不需要转换成响应式数据的对象
最后一个数据有些复杂，它长这样
//下面的结构是一个依赖表
//Dep是一个保存反应性effect函数的Set
export type Dep = Set<ReactiveEffect>
//KeyToDepMap是一个保存Dep的Map,KeyToDepMap的键只能是string或symbol
export type KeyToDepMap = Map<string | symbol, Dep>
//targetMap是记录KeyToDepMap的WeakMap结构，WeakMap的键只能是对象
export const targetMap = new WeakMap<any, KeyToDepMap>()
targetMap的结构是：{target对象 < - > KeyToDepMap}
KeyToDepMap的结构是：{key < - > Dep}
Dep的结构是：{effect依赖集合}
最后这个记录集合是作用于track事件和trigger事件的，track收集依赖到这个依赖表中。trigger找到依赖表对应键，调用effect依赖
reactive方法的内部就两个判断。一个是如果传入的对象是readonly响应式对象则直接返回这个对象，这里代表readonly无法转为reactive对象，另一个则是目标对象如果存在nonReactiveValues集合中则进行readonly数据转换并返回
readonly方法的内部就一条判断。如果传入对象是reactive对象则将获取它的原生对象继续执行。这里可以看出reactive对象是可以转换成readonly对象的
最后他们都会返回调用createReactiveObject，只不过传入的值不同。
reactive传入：{raw < - > reactive}、{reactive < - > raw}、mutableHandlers、mutableCollectionHandlers
readonly传入：{raw < - > readonly}、{readonly < - > raw}、readonlyHandlers、readonlyCollectionHandlers
而createReactiveObject方法的作用是创建反应性对象以及几个判断：
function createReactiveObject(
target: any,
toProxy: WeakMap<any, any>,
toRaw: WeakMap<any, any>,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
//如果target不是对象，则不能进行数据转换
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
let observed = toProxy.get(target)
//判断target是否已经有对应的响应对象
if (observed !== void 0) {
return observed
}
// 判断target是否已经是响应式对象
if (toRaw.has(target)) {
return target
}
// 判断target是否可观察，当target不可观察时返回target
if (!canObserve(target)) {
return target
}
//handlers判断target的构造函数是否为Set, Map, WeakMap, WeakSet,如果是则返回收集处理程序，不是则返回基本处理程序
const handlers = collectionTypes.has(target.constructor)
? collectionHandlers
: baseHandlers
//开始创建响应式对象：observed=new Proxy(target,baseHandlers|collectionHandlers)
observed = new Proxy(target, handlers)
//用于找到reactive对象的WeakMap保存原始对象和观察对象
toProxy.set(target, observed)
//用于找到原始对象的WeakMap保存观察对象和原始对象
toRaw.set(observed, target)
//如果targetMap没有target键则添加
if (!targetMap.has(target)) {
targetMap.set(target, new Map())
}
//返回响应式对象
return observed
}
还有一件重要的事情，reactive或readonly并非是调用后立即递归将嵌套对象都转变成响应式，而是在对嵌套对象进行读操作时进行转变
effect模块
首先是effect的类型定义
用于判断是否为effect函数的符号
export const effectSymbol = Symbol(__DEV__ ? 'effect' : void 0)
//reactveEffect函数类型
export interface ReactiveEffect<T = any> {
//函数调用后返回T类型
(): T
//用来判断是否为ReactiveEffect的Symbol
[effectSymbol]: true
//活性，stop后活性会变为false
active: boolean
//原生,返回自己的原生函数
raw: () => T
//由Set<ReactiveEffect<any>>组成的数组
deps: Array<Dep>
//标记计算属性
computed?: boolean
//调度器，来自配置项的scheduler
scheduler?: (run: Function) => void
//追踪事件,来自配置项的onTrack
onTrack?: (event: DebuggerEvent) => void
//触发事件,来自配置项的onTrigger
onTrigger?: (event: DebuggerEvent) => void
//停止事件,来自配置项的onStop
onStop?: () => void
}
接下来是很关键的活性effect函数调用栈数组，这个数组是trigger和track判断现在真正执行的函数时哪一个以便记录依赖
//活性ReactiveEffect栈，这是关键数据
export const activeReactiveEffectStack: ReactiveEffect[] = []
effect模块的主要API:effect，它接受一个options配置，来看看这个配置对象的类型定义
//ReactiveEffect配置对象的类型
export interface ReactiveEffectOptions {
//是否需要手动调用开始
lazy?: boolean
//?计算
computed?: boolean
//调度器,可以看作是节点，当effect因为依赖改变而需要运行时，需要手动运行调度器运行
scheduler?: (run: Function) => void
//追踪事件,监听effect内的set操作
onTrack?: (event: DebuggerEvent) => void
//触发事件,监听effect的依赖项set
onTrigger?: (event: DebuggerEvent) => void
//停止事件,通过stop停止effect时触发
onStop?: () => void
}
再来看看effect的内部实现
export function effect<T = any>(
fn: () => T,
//Options默认值是空对象
options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
//如果fn已经是effect则将fn改为它的原生函数
if (isEffect(fn)) {
fn = fn.raw
}
//创建ReactiveEffect函数，将options的配置复制到新函数上
const effect = createReactiveEffect(fn, options)
//如果option未设置lazy则直接调用
if (!options.lazy) {
effect()
}
return effect
}
createReactiveEffect方法用于创建Effect函数以及将一些配置加上去
function createReactiveEffect<T = any>(
fn: () => T,
options: ReactiveEffectOptions
): ReactiveEffect<T> {
const effect = function reactiveEffect(...args: any[]): any {
//每次执行的是run(effect, fn, args)
return run(effect, fn, args)
} as ReactiveEffect
effect[effectSymbol] = true
effect.active = true
effect.raw = fn
effect.scheduler = options.scheduler
effect.onTrack = options.onTrack
effect.onTrigger = options.onTrigger
effect.onStop = options.onStop
effect.computed = options.computed
effect.deps = []
return effect
}
每次执行effect都是执行run函数，这时活性effect调用栈排上用场了
function run(effect: ReactiveEffect, fn: Function, args: any[]): any {
//如果目标effect不是活的，则直接调用原函数
if (!effect.active) {
return fn(...args)
}
//这是检查activeReactiveEffectStack中有没有effect,没有则不执行
if (activeReactiveEffectStack.indexOf(effect) === -1) {
cleanup(effect)
// try...finally的执行顺序:finally在try之后运行
// 首先try块中的activeReactiveEffectStack.push(effect)会最先执行
// 这条语句不会报错，接下来返回调用fn
// 如果这时候退出了函数，意味者finally不会运行代码。
// 这里的return被推迟到了finally结束后，但fn(..args)也是在try块中调用的
// 下面代码的调用顺序是:activeReactiveEffectStack.push(effect) -> TemporarySave=fn(...args) ->
// activeReactiveEffectStack.pop() -> return TemporarySave
try {
//这应该是effect响应式的开始
activeReactiveEffectStack.push(effect)
return fn(...args)
} finally {
//这应该是effect响应式的结束
activeReactiveEffectStack.pop()
}
}
}
cleanup是用于将从那些key的依赖effect集合中删除自己，重新追踪依赖和触发事件
//将effect数组中的每个Set引用中的effect删除,清空effect的deps数组
function cleanup(effect: ReactiveEffect) {
const { deps } = effect
if (deps.length) {
for (let i = 0; i < deps.length; i++) {
deps[i].delete(effect)
}
deps.length = 0
}
}
接下来是track和trigger，前者收集依赖到targetMap，后者从targetMap中读取依赖effect并调用。那段源码太长了，可以去我github上看看
computed模块
这个模块相对比较绕，需要慢慢看。首先从computed开头声明的三个类型开始
//computed返回的类型，value是只读的
export interface ComputedRef<T> extends WritableComputedRef<T> {
readonly value: UnwrapRef<T>
}
//computed返回的类型
export interface WritableComputedRef<T> extends Ref<T> {
readonly effect: ReactiveEffect
}
//computed函数传入Options时规定的类型
export interface WritableComputedOptions<T> {
get: () => T
set: (v: T) => void
}
接下来是核心API computed，它返回一个Ref类型
//1.接受一个函数，返回对象:只读的effect和value，且继承Ref类型
export function computed<T>(getter: () => T): ComputedRef<T>
//2.接受一个getter函数和setter函数配置对象，返回对象:只读的effect,且继承Ref类型
export function computed<T>(
options: WritableComputedOptions<T>
): WritableComputedRef<T>
//3.返回值兼容前两种
export function computed<T>(
getterOrOptions: (() => T) | WritableComputedOptions<T>
): any {
//传入的参数是否为函数
const isReadonly = isFunction(getterOrOptions)
//如果是函数则为getter不是则为参数的get属性
const getter = isReadonly
? (getterOrOptions as (() => T))
: (getterOrOptions as WritableComputedOptions<T>).get
//如果是函数且在开发环境下则是一个会报错的setter函数，不是开发环境则是一个空函数
//不是函数则为参数的set属性
const setter = isReadonly
? __DEV__
? () => {
console.warn('Write operation failed: computed value is readonly')
}
: NOOP
: (getterOrOptions as WritableComputedOptions<T>).set
//脏
let dirty = true
let value: T
//runner是effect函数
const runner = effect(getter, {
lazy: true,
// mark effect as computed so that it gets priority during trigger
// 将效果标记为计算，以便在触发期间获得优先级
computed: true,
//因为这里设置的调度器，依赖触发tirgger事件只是将dirty变为true
scheduler: () => {
dirty = true
}
})
return {
[refSymbol]: true,
// expose effect so computed can be stopped
// 暴露effect，因此可以停止计算
effect: runner,
//getter函数运行时判断dirty是否为true，是则重新取值，不是则还是闭包中那个value
get value() {
if (dirty) {
value = runner()
//重新取值后设置dirty确保不会再重新取值，tirgger事件会将dirty变为true
dirty = false
}
// When computed effects are accessed in a parent effect, the parent
// should track all the dependencies the computed property has tracked.
// This should also apply for chained computed properties.
//当在父级效果中访问计算的效果时，父级应该跟踪计算属性跟踪的所有依赖项。
//这也应适用于链接的计算属性。
//跟踪computed运行函数,这里是为了让其他effect能够追踪到runner
//这段有些绕，这个场景是这样的
//当其他effect函数内部对computed返回的Ref有依赖时
//computed返回的Ref类型是没有拦截触发track和trigger事件的
//其他effect内部会有对Ref的value的一个读操作
//通过这个读操作跟踪runner
trackChildRun(runner)
return value
},
set value(newValue: T) {
setter(newValue)
}
}
}
这个Ref类型和Ref模块中声明的Ref类型有些不一样，他没有track事件和trigger事件，computed是通过get和set函数来确定value的值的，但它的getter又是一个effect函数，内部有一个dirty变量判断是否有tirgger事件触发computed调用，如果事件发生，computed不会调用而是把dirty变为true，访问这个Ref值就会调用effect函数并将dirty变为false。
如果其他effect内部使用了这个computed返回的Ref类型怎么办呢？如何监听这个Ref值的改变？computed模块中提供了一种解决方法，读取调用栈。试想这样一个场景，父effect调用了，内部使用了computed返回的Ref，这时发生了读操作Ref的读操作会调用trackChildRun
function trackChildRun(childRunner: ReactiveEffect) {
//父级运行函数，也就是刚被推入activeReactiveEffectStack的effect函数(effect模块中)
//把它看成一个其他运行的effect
const parentRunner =
activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
if (parentRunner) {
//遍历childRunner的依赖数组，childRunner也是effect函数，他在运行时也有一个依赖数组
for (let i = 0; i < childRunner.deps.length; i++) {
//获取依赖数组中的effect依赖(Set结构)，这个引用的终点是响应式对象的key键的effect依赖集合
const dep = childRunner.deps[i]
//如果依赖中不存在父effect
if (!dep.has(parentRunner)) {
//将父effect加入dep集合
dep.add(parentRunner)
//将dep推入父effect的依赖数组
parentRunner.deps.push(dep)
}
}
}
}
trackChildRun会将子Effect的依赖加入父Effect的依赖，这样在子Effect的依赖触发trigger事件时，子effect不会调用，但会把dirty变为true，父effect会调用，父effect内部对Ref值进行读操作，这时子effect调用将内部value改为新值。这样父effect就不会错过子effect的trigger事件了。
完结
本篇文章，我也是第一次写源码笔记，可能很多点都没有写道，建议把源码下载下来看看
如果有疑问，可以前往我的Github把我写的Vue-next -> reactivity源码注释Clone下来看看： github.com/LiuYun18571…
