effect

effect 作为 reactive 的核心，主要负责收集依赖，更新依赖

如果你还没看过 reactive , 建议点这里

文档直通车: https://vue3js.cn/vue-composition-api/#reactive

正文

我们还是选择先从定义看起

effect 接收两个参数

  • fn 回调函数
  • options 参数 
  2. export interface ReactiveEffectOptions {
  3.   lazy?: boolean //  是否延迟触发 effect
  4.   computed?: boolean // 是否为计算属性
  5.   scheduler?: (job: ReactiveEffect) => void // 调度函数
  6.   onTrack?: (event: DebuggerEvent) => void // 追踪时触发
  7.   onTrigger?: (event: DebuggerEvent) => void // 触发回调时触发
  8.   onStop?: () => void // 停止监听时触发
  9. }
  11. export function effect<T = any>(
  12.   fn: () => T,
  13.   options: ReactiveEffectOptions = EMPTY_OBJ
  14. ): ReactiveEffect<T> {
  15.   // 如果已经是 `effect` 先重置为原始对象
  16.   if (isEffect(fn)) {
  17.     fn = fn.raw
  18.   }
  20.   // 创建`effect`
  21.   const effect = createReactiveEffect(fn, options)
  23.   // 如果没有传入 lazy 则直接执行一次 `effect`
  24.   if (!options.lazy) {
  25.     effect()
  26.   }
  27.   return effect
  28. }

入口很简单，我们继续看一下 effect 是怎么创建的，如果下面这些你觉得相对难理解，建议先去看一遍单元测试，单元测试会助你快速了解整个单元的目的 

  1. function createReactiveEffect<T = any>(
  2.   fn: (...args: any[]) => T,
  3.   options: ReactiveEffectOptions
  4. ): ReactiveEffect<T> {
  5.   const effect = function reactiveEffect(...args: unknown[]): unknown {
  7.     // 没有激活，说明我们调用了effect stop 函数，
  8.     if (!effect.active) {
  9.       // 如果没有调度者，直接返回，否则直接执行fn
  10.       return options.scheduler ? undefined : fn(...args)
  11.     }
  13.     // 判断effectStack中有没有effect, 如果在则不处理
  14.     if (!effectStack.includes(effect)) {
  15.       // 清除effect依赖，定义在下方
  16.       cleanup(effect)
  17.       try {
  18.         // 开始重新收集依赖
  19.         enableTracking()
  20.         // 压入Stack
  21.         effectStack.push(effect)
  22.         // 将activeEffect当前effect 
  23.         activeEffect = effect
  24.         return fn(...args)
  25.       } finally {
  26.         // 完成后将effect弹出
  27.         effectStack.pop()
  28.         // 重置依赖
  29.         resetTracking()
  30.         // 重置activeEffect 
  31.         activeEffect = effectStack[effectStack.length - 1]
  32.       }
  33.     }
  34.   } as ReactiveEffect
  35.   effect.id = uid++ // 自增id, effect唯一标识
  36.   effect._isEffect = true  // 是否是effect
  37.   effect.active = true // 是否激活 
  38.   effect.raw = fn // 挂载原始对象
  39.   effect.deps = []  // 当前 effect 的dep 数组
  40.   effect.options = options // 传入的options，在effect有解释的那个字段
  41.   return effect
  42. }
  44. const effectStack: ReactiveEffect[] = []
  46. // 每次 effect 运行都会重新收集依赖, deps 是 effect 的依赖数组, 需要全部清空
  47. function cleanup(effect: ReactiveEffect) {
  48.   const { deps } = effect
  49.   if (deps.length) {
  50.     for (let i = 0; i < deps.length; i++) {
  51.       deps[i].delete(effect)
  52.     }
  53.     deps.length = 0
  54.   }
  55. }

看到这里应该会有一个问题了？effect 是如何收集及触发依赖的呢？现在我们回想一下在reactive高频出现的两个函数

  • track 收集依赖(get操作)
  • trigger 触发依赖(触发更新后执行监听函数之前触发)

track

  1. /**
  2.  * @description: 
  3.  * @param {target} 目标对象 
  4.  * @param {type} 收集的类型,  函数的定义在下方 
  5.  * @param {key} 触发 track 的 object 的 key 
  6.  */
  7. export function track(target: object, type: TrackOpTypes, key: unknown) {
  8.   // activeEffect为空代表没有依赖，直接return
  9.   if (!shouldTrack || activeEffect === undefined) {
  10.     return
  11.   }
  13.   // targetMap 依赖管理中心，用于收集依赖和触发依赖
  14.   // 检查targetMap中有没有当前target
  15.   let depsMap = targetMap.get(target)
  16.   if (!depsMap) {
  17.     // 没有则新建一个
  18.     targetMap.set(target, (depsMap = new Map()))
  19.   }
  21.   // deps 来收集依赖函数，当监听的 key 值发生变化时，触发 dep 中的依赖函数
  22.   let dep = depsMap.get(key)
  23.   if (!dep) {
  24.     depsMap.set(key, (dep = new Set()))
  25.   }
  26.   if (!dep.has(activeEffect)) {
  27.     dep.add(activeEffect)
  28.     activeEffect.deps.push(dep)
  29.     // 开发环境会触发onTrack, 仅用于调试
  30.     if (__DEV__ && activeEffect.options.onTrack) {
  31.       activeEffect.options.onTrack({
  32.         effect: activeEffect,
  33.         target,
  34.         type,
  35.         key
  36.       })
  37.     }
  38.   }
  39. }
  41. //  get、 has、 iterate 三种类型的读取对象会触发 track
  42. export const enum TrackOpTypes {
  43.   GET = 'get',
  44.   HAS = 'has',
  45.   ITERATE = 'iterate'
  46. }

trigger

  1. export function trigger(
  2.   target: object,
  3.   type: TriggerOpTypes, 
  4.   key?: unknown,
  5.   newValue?: unknown,
  6.   oldValue?: unknown,
  7.   oldTarget?: Map<unknown, unknown> | Set<unknown>
  8. ) {
  9.   const depsMap = targetMap.get(target)
  10.   // 依赖管理中没有, 代表没有收集过依赖，直接返回
  11.   if (!depsMap) {
  12.     // never been tracked
  13.     return
  14.   }
  16.   // 对依赖进行分类
  17.   // effects 代表普通依赖，
  18.   // computedRunners 为计算属性依赖 
  19.   // 都是 Set 结构，避免重复收集
  20.   const effects = new Set<ReactiveEffect>()
  21.   const computedRunners = new Set<ReactiveEffect>()
  22.   const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
  23.     if (effectsToAdd) {
  24.       effectsToAdd.forEach(effect => {
  25.         // 避免重复收集
  26.         if (effect !== activeEffect || !shouldTrack) {
  27.           // 计算属性依赖
  28.           if (effect.options.computed) {
  29.             computedRunners.add(effect)
  30.           } else {
  31.             // 普通属性依赖
  32.             effects.add(effect)
  33.           }
  34.         } else {
  35.           // the effect mutated its own dependency during its execution.
  36.           // this can be caused by operations like foo.value++
  37.           // do not trigger or we end in an infinite loop
  38.         }
  39.       })
  40.     }
  41.   }
  43.   if (type === TriggerOpTypes.CLEAR) {
  44.     // collection being cleared
  45.     // trigger all effects for target
  46.     depsMap.forEach(add)
  47.   } else if (key === 'length' && isArray(target)) {
  48.     depsMap.forEach((dep, key) => {
  49.       if (key === 'length' || key >= (newValue as number)) {
  50.         add(dep)
  51.       }
  52.     })
  53.   } else {
  54.     // schedule runs for SET | ADD | DELETE
  55.     if (key !== void 0) {
  56.       add(depsMap.get(key))
  57.     }
  58.     // also run for iteration key on ADD | DELETE | Map.SET
  59.     const isAddOrDelete =
  60.       type === TriggerOpTypes.ADD ||
  61.       (type === TriggerOpTypes.DELETE && !isArray(target))
  62.     if (
  63.       isAddOrDelete ||
  64.       (type === TriggerOpTypes.SET && target instanceof Map)
  65.     ) {
  66.       add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))
  67.     }
  68.     if (isAddOrDelete && target instanceof Map) {
  69.       add(depsMap.get(MAP_KEY_ITERATE_KEY))
  70.     }
  71.   }
  73.   const run = (effect: ReactiveEffect) => {
  74.     if (__DEV__ && effect.options.onTrigger) {
  75.       effect.options.onTrigger({
  76.         effect,
  77.         target,
  78.         key,
  79.         type,
  80.         newValue,
  81.         oldValue,
  82.         oldTarget
  83.       })
  84.     }
  86.     // 如果 scheduler 存在则调用 scheduler，计算属性拥有 scheduler
  87.     if (effect.options.scheduler) {
  88.       effect.options.scheduler(effect)
  89.     } else {
  90.       effect()
  91.     }
  92.   }
  94.   // Important: computed effects must be run first so that computed getters
  95.   // can be invalidated before any normal effects that depend on them are run.
  96.   // 触发依赖函数
  97.   computedRunners.forEach(run)
  98.   effects.forEach(run)
  99. }