Reactive源码分析

Reactive用来绑定引用数据类型, 例如对象和数组等,实现响应式。

Reactive API 接口

export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

相关API包括readonly、createReactiveObject、shallowReadonly、isReactive、toReactive。源码运行逻辑：判断isReadonly,如果是直接return,不是则进入createReactiveObject函数，创建Reactive Object

export function reactive(target: object) {// if trying to observe a readonly proxy, return the readonly version.if (isReadonly(target)) {return target}return createReactiveObject(target,false,mutableHandlers,mutableCollectionHandlers,reactiveMap)
}

使用新的Proxy,通过判断target的目标执行不同句柄（collectionHandlers : baseHandlers）

  const proxy = new Proxy(target,targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers)

target的类型由下面的方法来确定

function targetTypeMap(rawType: string) {switch (rawType) {case 'Object':case 'Array':return TargetType.COMMONcase 'Map':case 'Set':case 'WeakMap':case 'WeakSet':return TargetType.COLLECTIONdefault:return TargetType.INVALID}
}

如果target是Object的话就会执行baseHandlers句柄,在同目录下的baseHandlers.ts中有对应的set和get方法拦截处理。
会通过createSet方法中的

   if (!isReadonly) {track(target, TrackOpTypes.GET, key)}

触发effect.ts文件中的track函数执行trackeffects来操作数据的改变。

export function trackEffects(dep: Dep,debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {let shouldTrack = falseif (effectTrackDepth <= maxMarkerBits) {if (!newTracked(dep)) {dep.n |= trackOpBit // set newly trackedshouldTrack = !wasTracked(dep)}} else {// Full cleanup mode.shouldTrack = !dep.has(activeEffect!)}if (shouldTrack) {dep.add(activeEffect!)activeEffect!.deps.push(dep)if (__DEV__ && activeEffect!.onTrack) {activeEffect!.onTrack({effect: activeEffect!,...debuggerEventExtraInfo!})}}
}

如上述，get方法会触发trigger方法执行trigger副作用，完成数据更新。
最后附上Reactive的原理图

摘自_mxin

下一篇将讲解reactive应用