export type ComputedGetter<T> = (...args: any[]) => T
export type ComputedSetter<T> = (v: T) => void
export interface WritableComputedOptions<T> {
  get: ComputedGetter<T>
  set: ComputedSetter<T>
}
class ComputedRefImpl<T> {
  public dep?: Dep = undefined
  private _value!: T
  private _dirty = true
  public readonly effect: ReactiveEffect<T>
  public readonly __v_isRef = true
  public readonly [ReactiveFlags.IS_READONLY]: boolean
  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean
  ) {
    //內部存儲一個ReactiveEffect對象
    this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        //標記下次讀取將重新計算值
        this._dirty = true
        //觸發(fā)依賴更新
        triggerRefValue(this)
      }
    })
    this[ReactiveFlags.IS_READONLY] = isReadonly
  }
  get value() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
    const self = toRaw(this)
    //收集依賴
    trackRefValue(self)
    //是否重新計算標記
    if (self._dirty) {
      //重新計算
      self._dirty = false
      self._value = self.effect.run()!
    }
    //直接獲取計算好的值
    return self._value
  }
  set value(newValue: T) {
    this._setter(newValue)
  }
}
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
  const onlyGetter = isFunction(getterOrOptions)
  if (onlyGetter) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  //只需要關注這兒
  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter)
  if (__DEV__ && debugOptions) {
    cRef.effect.onTrack = debugOptions.onTrack
    cRef.effect.onTrigger = debugOptions.onTrigger
  }
  return cRef as any
}

export function triggerEffects(
? dep: Dep | ReactiveEffect[],
? debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
? // spread into array for stabilization
? for (const effect of isArray(dep) ? dep : [...dep]) {
? ? if (effect !== activeEffect || effect.allowRecurse) {
? ? ? if (__DEV__ && effect.onTrigger) {
? ? ? ? effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
? ? ? }
? ? ? if (effect.scheduler) {
? ? ? ? effect.scheduler()
? ? ? } else {
? ? ? ? effect.run()
? ? ? }
? ? }
? }
}

export class ReactiveEffect<T = any> {
? active = true
? deps: Dep[] = []
? // can be attached after creation
? computed?: boolean
? allowRecurse?: boolean
? onStop?: () => void
? // dev only
? onTrack?: (event: DebuggerEvent) => void
? // dev only
? onTrigger?: (event: DebuggerEvent) => void
? constructor(
? ? public fn: () => T,
? ? public scheduler: EffectScheduler | null = null,
? ? scope?: EffectScope | null
? ) {
? ? recordEffectScope(this, scope)
? }
}

const tick = Promise.resolve()
const queue: any[] = []
let queued = false
const scheduler = (fn: any) => {
? queue.push(fn)
? if (!queued) {
? ? queued = true
? ? tick.then(flush)
? }
}
const flush = () => {
? for (let i = 0; i < queue.length; i++) {
? ? queue[i]()
? }
? queue.length = 0
? queued = false
}
class DeferredComputedRefImpl<T> {
? public dep?: Dep = undefined
? private _value!: T
? private _dirty = true
? public readonly effect: ReactiveEffect<T>
? public readonly __v_isRef = true
? public readonly [ReactiveFlags.IS_READONLY] = true
? constructor(getter: ComputedGetter<T>) {
? ? let compareTarget: any
? ? let hasCompareTarget = false
? ? let scheduled = false
? ? this.effect = new ReactiveEffect(getter, (computedTrigger?: boolean) => {
? ? ? if (this.dep) {
? ? ? ? if (computedTrigger) {
? ? ? ? ? compareTarget = this._value
? ? ? ? ? hasCompareTarget = true
? ? ? ? } else if (!scheduled) {
? ? ? ? ? const valueToCompare = hasCompareTarget ? compareTarget : this._value
? ? ? ? ? scheduled = true
? ? ? ? ? hasCompareTarget = false
? ? ? ? ? //加入執(zhí)行隊列
? ? ? ? ? scheduler(() => {
? ? ? ? ? ? if (this.effect.active && this._get() !== valueToCompare) {
? ? ? ? ? ? ? triggerRefValue(this)
? ? ? ? ? ? }
? ? ? ? ? ? scheduled = false
? ? ? ? ? })
? ? ? ? }
? ? ? ? // chained upstream computeds are notified synchronously to ensure
? ? ? ? // value invalidation in case of sync access; normal effects are
? ? ? ? // deferred to be triggered in scheduler.
? ? ? ? for (const e of this.dep) {
? ? ? ? ? if (e.computed) {
? ? ? ? ? ? e.scheduler!(true /* computedTrigger */)
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? //保證異步方法獲取值時是重新計算的。
? ? ? this._dirty = true
? ? })
? ? this.effect.computed = true
? }
? private _get() {
? ? if (this._dirty) {
? ? ? this._dirty = false
? ? ? return (this._value = this.effect.run()!)
? ? }
? ? return this._value
? }
? get value() {
? ? trackRefValue(this)
? ? // the computed ref may get wrapped by other proxies e.g. readonly() #3376
? ? return toRaw(this)._get()
? }
}
export function deferredComputed<T>(getter: () => T): ComputedRef<T> {
? return new DeferredComputedRefImpl(getter) as any
}

for (const e of this.dep) {
? if (e.computed) {
? ? e.scheduler!(true /* computedTrigger */)
? }
}

? ? const src = ref(0)
? ? const c1 = deferredComputed(() => {
? ? ? return src.value % 2
? ? })
? ? const c2 = deferredComputed(() => {
? ? ? return c1.value + 1
? ? })
? ? effect(() => {
? ? ? c2.value
? ? })
? ? src.value = 1
? ? //同步打印c2.value，輸出2
? ? console.log(c2.value);

if (this.effect.active && this._get() !== valueToCompare) {
? ? triggerRefValue(this)
}