vue3的ReativeEffect原理

1. 执行setupRenderEffect
2. 声明了componentUpdateFn
3. 产生componentUpdateFn对应的副作用函数
4. new ReactiveEffect()，产生了activeEffect 实例
5. 第一次执行componentUpdateFn，本次内部走的是未挂载流程patch
6. patch时候，activeEffect 和 响应式数据双向收集依赖
7. 当响应式数据发生变化时，触发关联的activeEffect执行effect.schedule
8. schedule其实就是() => queueJob(instance.update)
9. queueJob将instance.update放入队列queue中 ，且进一步执行queueFlush
10. queueFlush建立了一个Promise微任务
11. 等到执行微任务时候，就是批量执行instance.update
12. 第二次执行componentUpdateFn，本次内部走的是挂载完成的patch

const effect = (instance.effect = new ReactiveEffect(
   componentUpdateFn,
   () => queueJob(instance.update), // 其实就是effect.run
   instance.scope
))
const update = ( instance.update = effect.run.bind(effect) ) // bind是返回run函数的，不是执行run函数

class ReactiveEffect{
  active = true
  deps: Dep[] = []
  parent: ReactiveEffect | undefined = undefined
  computed?: ComputedRefImpl<T>
  allowRecurse?: boolean
  onStop?: () => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null,
    scope?: EffectScope
  ) {
    recordEffectScope(this, scope)
  }
  run() {
    if (!this.active) {
      return this.fn()
    }
    let parent: ReactiveEffect | undefined = activeEffect
    let lastShouldTrack = shouldTrack
    while (parent) {
      if (parent === this) {
        return
      }
      parent = parent.parent
    }
    try {
      this.parent = activeEffect
      activeEffect = this
      shouldTrack = true

      trackOpBit = 1 << ++effectTrackDepth

      if (effectTrackDepth <= maxMarkerBits) {
        initDepMarkers(this)
      } else {
        cleanupEffect(this)
      }
      return this.fn()
    } finally {
      if (effectTrackDepth <= maxMarkerBits) {
        finalizeDepMarkers(this)
      }
      trackOpBit = 1 << --effectTrackDepth
      activeEffect = this.parent
      shouldTrack = lastShouldTrack
      this.parent = undefined
    }
  }
  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

function queueJob(job) {
  if (
    (!queue.length ||
      !queue.includes(
        job,
        isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
      )) &&
    job !== currentPreFlushParentJob
  ) {
    if (job.id == null) {
      queue.push(job)
    } else {
      queue.splice(findInsertionIndex(job.id), 0, job)
    }
    queueFlush()
  }
}

function queueFlush() {
  if (!isFlushing && !isFlushPending) {
    isFlushPending = true
    currentFlushPromise = resolvedPromise.then(flushJobs)
  }
}

const resolvedPromise = Promise.resolve()