你还不知道vue3中依赖收集和派发更新的实现逻辑吗？那你就out啦~还不快来看！

export function effect<T = any>(
  fn: () => T,
  options?: ReactiveEffectOptions
): ReactiveEffectRunner {
  // 如果已经是effect副作用函数，则返回副作用的原始函数
  if ((fn as ReactiveEffectRunner).effect) {
    fn = (fn as ReactiveEffectRunner).effect.fn
  }

  const _effect = new ReactiveEffect(fn)
  // 创建`effect`
  if (options) {
    extend(_effect, options)
    if (options.scope) recordEffectScope(_effect, options.scope)
  }
  // 若不是延迟执行，则立即执行一次副作用函数（计算属性lazy为true）
  if (!options || !options.lazy) {
    _effect.run()
  }
  const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
  runner.effect = _effect
  // 返回副作用函数
  return runner
}

 const _effect = new ReactiveEffect(fn)

const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
  runner.effect = _effect
  // 返回副作用函数
  return runner

// 临时存储响应式函数
const effectStack: ReactiveEffect[] = [] 

// 依赖收集栈
const trackStack: boolean[] = [] 

// 最大嵌套深度
const maxMarkerBits = 30

export class ReactiveEffect<T = any> {
  run() {
     // 如果effect非激活状态，则返回原始副作用函数执行后的结果（fn就是被effect包裹的原始函数）
    if (!this.active) {
      return this.fn()
    }
    // 如effect不在effectStack栈中
    if (!effectStack.includes(this)) {
      try {
        // 当调用 effect 注册副作用函数时， 将副作用函数赋值给 activeEffect
        effectStack.push((activeEffect = this))
         // 在调用副作用函数之前将当前副作用函数压入栈中
        enableTracking()

        // 记录递归深度位数
        trackOpBit = 1 << ++effectTrackDepth

        // 如果 effect 嵌套层数没有超过 30 层
        if (effectTrackDepth <= maxMarkerBits) {
          // 给依赖打标记，for循环遍历 _effect 实例中的 deps 属性，
          // 给每个 deps 的 w 属性标记为 trackOpBit 的值
          // deps就是用来存储所有与该副作用函数相关联的依赖集合
          initDepMarkers(this)
        } else {
          // 清除当前 effect 相关依赖
          cleanupEffect(this)
        }
        return this.fn()
      } finally {
        // 完成依赖标记
        if (effectTrackDepth <= maxMarkerBits) {
          finalizeDepMarkers(this)
        }

        // 恢复到上一级
        trackOpBit = 1 << --effectTrackDepth

        // 重置依赖收集状态
        resetTracking()
        // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，
        // 并把 activeEffect 还原为之前的值（始终让activeEffect 指向栈顶的副作用函数）
        effectStack.pop()
        const n = effectStack.length
        activeEffect = n > 0 ? effectStack[n - 1] : undefined
      }
    }
  }
}

/**
 * @description: 
 * @param {target} 目标对象 
 * @param {type} 收集的类型（GET = 'get', HAS = 'has', ITERATE = 'iterate'） 
 * @param {key} 触发 track 的 object 的 key 
 */
export function track(target: object, type: TrackOpTypes, key: unknown) {
  // 不启用依赖收集 则直接return
  if (!isTracking()) {
    return
  }

  // targetMap 依赖管理中心，用于收集依赖和触发依赖
  // 在 targetMap 中获取对应的 target 的依赖集合
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    // 如果 target 不在 targetMap 中，则新建一个，并初始化 value 为 new Map()
    targetMap.set(target, (depsMap = new Map()))
  }
  // deps 来收集依赖函数，当监听的 key 值发生变化时，触发 dep 中的依赖函数
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = createDep()))
  }

  const eventInfo = __DEV__
    ? { effect: activeEffect, target, type, key }
    : undefined

  trackEffects(dep, eventInfo)
}

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  const depsMap = targetMap.get(target)
  // 依赖管理中心没有, 代表没有收集过依赖，直接返回
  if (!depsMap) {
    // never been tracked
    return
  }

  let deps: (Dep | undefined)[] = []
  // 传入的类型为清除
  if (type === TriggerOpTypes.CLEAR) {
    // 收集被清除
    // 触发目标效果
    deps = [...depsMap.values()]
  } else if (key === 'length' &amp;&amp; isArray(target)) {
    // 如果类型为数组，并且数组的 length 改变时
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        deps.push(dep)
      }
    })
  } else {
    // 如果 key 不是 undefined，就添加对应依赖到队列，比如新增、修改、删除
    if (key !== void 0) {
      deps.push(depsMap.get(key))
    }

    // 根据type类型 处理新增、修改、删除逻辑
    switch (type) {
      case TriggerOpTypes.ADD:
        if (!isArray(target)) {
          // 往队列中添加关联的所有依赖，准备清除
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // new index added to array -> length changes
          deps.push(depsMap.get('length'))
        }
        break
      case TriggerOpTypes.DELETE:
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      case TriggerOpTypes.SET:
        if (isMap(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }

  // 到这里就拿到了 targetMap[target][key]，并存到 deps 里
  // 接着是要将对应的 effect 取出，调用 triggerEffects 执行

  // 开发环境赋值 eventInfo
  const eventInfo = __DEV__
    ? { target, type, key, newValue, oldValue, oldTarget }
    : undefined

  // deps内只有一个effect时直接取出执行，多个依赖则循环执行
  if (deps.length === 1) {
    if (deps[0]) {
      if (__DEV__) {
        triggerEffects(deps[0], eventInfo)
      } else {
        triggerEffects(deps[0])
      }
    }
  } else {
    const effects: ReactiveEffect[] = []
    for (const dep of deps) {
      if (dep) {
        effects.push(...dep)
      }
    }
    if (__DEV__) {
      triggerEffects(createDep(effects), eventInfo)
    } else {
      triggerEffects(createDep(effects))
    }
  }
}

export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // 遍历 effect 的集合函数
  for (const effect of isArray(dep) ? dep : [...dep]) {
    if (effect !== activeEffect || effect.allowRecurse) {
      if (__DEV__ && effect.onTrigger) {
        effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
      }
      // 有 scheduler 则执行
      if (effect.scheduler) {
        effect.scheduler()
      } else {
        // 执行 effect 副作用函数
        effect.run()
      }
    }
  }
}