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.COMMON
case 'Map':
case 'Set':
case 'WeakMap':
case 'WeakSet':
return TargetType.COLLECTION
default:
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 = false
if (effectTrackDepth <= maxMarkerBits) {
if (!newTracked(dep)) {
dep.n |= trackOpBit // set newly tracked
shouldTrack = !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应用