Reactive源码分析

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

Reactive API 接口

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

相关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
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

触发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!
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

摘自_mxin

下一篇将讲解reactive应用