it('should observe basic properties', () => {
 let dummy
 const counter = reactive({ num: 0 })
 effect(() => (dummy = counter.num))

 expect(dummy).toBe(0)
 counter.num = 7
 expect(dummy).toBe(7)
})

const value = reactive<{ foo?: number }>({})
const cValue = computed(() => value.foo)
expect(cValue.value).toBe(undefined)
value.foo = 1
expect(cValue.value).toBe(1)

function computed (fn) {
 let value = undefined
 const runner = effect(fn, {
  // 如果lazy不置為true的話，每次創(chuàng)建effect的時(shí)候都會(huì)立即執(zhí)行一次
  // 而我們要實(shí)現(xiàn)computed顯然是不需要的
  lazy: true
 })
 // 為什么要使用對(duì)象的形式，是因?yàn)槲覀冏詈笮枰玫絚omputed的值
 // 如果不用對(duì)象的 get 方法的話我們就需要手動(dòng)再調(diào)用一次 computed() 
 return {
  get value() {
   return runner()
  }
 }
}

// 使用起來(lái)是這樣的

const value = reactive({})
const cValue = computed(() => value.foo)
value.foo = 1

console.log(cValue.value) // 1

// 比如 const react = reactive({a: { b: 2 })
// react.a 時(shí) target -> {a: { b: 2 } key -> a 
// targetMap 儲(chǔ)存了 target --> Map --> key --> Set --> dep --> effect 
// 當(dāng)調(diào)用 react.a.b.c.d.e 時(shí) depsMap
// {"a" => Set(1)} --> Set --> effect
// {"b" => Set(1)}
// {"c" => Set(1)}
// {"d" => Set(1)}
// {"e" => Set(1)}
export function track(target: any, key: string) {
 const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1];
 if (effect) {
  let depsMap = targetMap.get(target);
  if (depsMap === void 0) {
   targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key!);
  if (!dep) {
   depsMap.set(key!, (dep = new Set()));
  }
  if (!dep.has(effect)) {
   dep.add(effect);
   effect.deps.push(dep);
  }
 }
}

export function trigger(target: any, key?: string | symbol) {
 const depsMap: any = targetMap.get(target);
 const effects: any = new Set()
 if (depsMap && depsMap.get(key)) {
  depsMap.get(key).forEach((dep: any) => {
   effects.add(dep)
  });
  effects.forEach((e: any) => e())
 }
}

// 暴露的 effect 函數(shù)
export function effect(
 fn: Function,
 options: any = EMPTY_OBJ
): any {
 if ((fn as any).isEffect) {
  fn = (fn as any).raw
 }
 const effect = createReactiveEffect(fn, options)
 // 如果不是 lazy，則會(huì)立即執(zhí)行一次
 if (!options.lazy) {
  effect()
 }
 return effect
}

// 創(chuàng)建 effect
function createReactiveEffect(
 fn: Function,
 options: any
): any {
 const effect = function effect(...args: any): any {
  return run(effect as any, fn, args)
 } as any
 effect.isEffect = true
 effect.active = true
 effect.raw = fn
 effect.scheduler = options.scheduler
 effect.onTrack = options.onTrack
 effect.onTrigger = options.onTrigger
 effect.onStop = options.onStop
 effect.computed = options.computed
 effect.deps = []
 return effect
}

// 執(zhí)行函數(shù)，執(zhí)行完之后會(huì)將儲(chǔ)存的 effect 刪除
// 這是函數(shù) effect 的所有執(zhí)行，所經(jīng)歷的完整的聲明周期
function run(effect: any, fn: Function, args: any[]): any {
 if (!effect.active) {
  return fn(...args)
 }
 if (activeReactiveEffectStack.indexOf(effect) === -1) {
  try {
   activeReactiveEffectStack.push(effect)
   return fn(...args)
  } finally {
   activeReactiveEffectStack.pop()
  }
 }
}