import { reactive, effect } from 'vue'
const obj = reactive({ count: 0 })
effect(() => {
  console.log(`count is: ${obj.count}`)
})

obj.count++  // 觸發(fā)依賴更新，控制臺打印 "count is: 1"

class ReactiveEffect<T = any> {
  // 當(dāng)前 effect 的所有依賴項（其他響應(yīng)式對象）
  deps: Dep[] = []
  // 構(gòu)造函數(shù)參數(shù)
  constructor(
    public fn: () => T,            // 副作用函數(shù)
    public scheduler?: () => void  // 調(diào)度函數(shù)（控制重新執(zhí)行方式）
  ) {}
  // 運行副作用（觸發(fā)依賴收集）
  run() {
    activeEffect = this // 標(biāo)記當(dāng)前正在運行的 effect
    try {
      return this.fn()
    } finally {
      activeEffect = undefined
    }
  }
  // 停止偵聽
  stop() { /* 從所有依賴中移除自身 */ }
}

type Dep = Set<ReactiveEffect>    // 依賴集合
type TargetMap = WeakMap<Object, Map<string, Dep>> // 全局依賴存儲

effect(() => {
  console.log(obj.count)
}, {
  scheduler(effect) { 
    // 如將 effect 推入微任務(wù)隊列中異步執(zhí)行
    queueMicrotask(effect.run) 
  }
})

function run() {
  if (!effectStack.includes(this)) {
    try {
      effectStack.push((activeEffect = this))
      return this.fn()
    } finally {
      effectStack.pop()
      activeEffect = effectStack[effectStack.length - 1]
    }
  }
}

function run() {
  cleanup(this) // 清理之前收集的舊依賴
  // ...然后重新收集新依賴
}

const runner = effect(fn, { lazy: true })
runner() // 手動執(zhí)行

function setupRenderEffect(instance) {
  effect(() => {
    const subTree = instance.render.call(instance.proxy)
    patch(instance.subTree, subTree)
    instance.subTree = subTree
  }, { scheduler: queueJob }) // 異步更新隊列
}

const computedRef = new ComputedRefImpl(
  getter,
  () => { // 調(diào)度器
    if (!this._dirty) {
      this._dirty = true
      trigger(this, 'set', 'value')
    }
  }
)

function watch(source, cb, { flush } = {}) {
  let scheduler
  if (flush === 'sync') {
    scheduler = cb
  } else { // 'post' 或其他默認(rèn)情況
    scheduler = () => queuePostFlushCb(cb)
  }
  effect(() => traverse(source), { scheduler })
}

+---------------------+
|   Reactive Object   |
+----------+----------+
           │ 訪問屬性時
           ▼
+---------------------+
|   觸發(fā) get 代理     +----→ track(target, key)
+---------------------+         │
           ▲                    ▼ 存儲依賴關(guān)系
           │          +---------------------+
           +----------+    targetMap        |
                      | (WeakMap結(jié)構(gòu))        |
                      +---------+-----------+
                                │
                                ▼
                      +---------------------+
                      |   depsMap (Map)     |
                      | (key → Dep Set)      |
                      +---------+-----------+
                                │
                                ▼
                      +---------------------+
                      |   dep (Set)         |
                      | (存儲所有關(guān)聯(lián)的 effect)|
                      +---------------------+