Red Huang

 const state = reactive({
  count: 0,
  double: computed(() => state.count * 2)
}) 

 it('should return updated value', () => {
    const value = reactive<{ foo?: number }>({})
    const cValue = computed(() => value.foo)
    expect(cValue.value).toBe(undefined)
    value.foo = 1
    expect(cValue.value).toBe(1)
}) 

 export function computed<T>(getter: () => T): ComputedRef<T>
export function computed<T>(
  options: WritableComputedOptions<T>
): WritableComputedRef<T>
export function computed<T>(
  getterOrOptions: (() => T) | WritableComputedOptions<T>
): any {
  const isReadonly = isFunction(getterOrOptions)
  const getter = isReadonly
    ? (getterOrOptions as (() => T))
    : (getterOrOptions as WritableComputedOptions<T>).get
  const setter = isReadonly
    ? __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
    : (getterOrOptions as WritableComputedOptions<T>).set

  let dirty = true
  let value: T

  const runner = effect(getter, {
    lazy: true,
    // mark effect as computed so that it gets priority during trigger
    computed: true,
    scheduler: () => {
      dirty = true
    }
  }) 

 export function effect(
  fn: Function,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect {
  if ((fn as ReactiveEffect).isEffect) {
    fn = (fn as ReactiveEffect).raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
} 

 const runner = effect(getter, {
    lazy: true,
    // mark effect as computed so that it gets priority during trigger
    computed: true,
    scheduler: () => {
      dirty = true
    }
  })
  return {
    [refSymbol]: true,
    // expose effect so computed can be stopped
    effect: runner,
    get value() {
      if (dirty) {
        value = runner()
        dirty = false
      }
      // When computed effects are accessed in a parent effect, the parent
      // should track all the dependencies the computed property has tracked.
      // This should also apply for chained computed properties.
      trackChildRun(runner)
      return value
    },
    set value(newValue: T) {
      setter(newValue)
    }
  }
} 

 export function trigger(
  target: any,
  type: OperationTypes,
  key?: string | symbol,
  extraInfo?: any
) {
  const depsMap = targetMap.get(target)
  if (depsMap === void 0) {
    // never been tracked
    return
  }
  const effects = new Set<ReactiveEffect>()
  const computedRunners = new Set<ReactiveEffect>()
  if (type === OperationTypes.CLEAR) {
    // collection being cleared, trigger all effects for target
    depsMap.forEach(dep => {
      addRunners(effects, computedRunners, dep)
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      addRunners(effects, computedRunners, depsMap.get(key))
    }
    // also run for iteration key on ADD | DELETE
    if (type === OperationTypes.ADD || type === OperationTypes.DELETE) {
      const iterationKey = Array.isArray(target) ? 'length' : ITERATE_KEY
      addRunners(effects, computedRunners, depsMap.get(iterationKey))
    }
  }
  const run = (effect: ReactiveEffect) => {
    scheduleRun(effect, target, type, key, extraInfo)
  }
  // Important: computed effects must be run first so that computed getters
  // can be invalidated before any normal effects that depend on them are run.
  computedRunners.forEach(run)
  effects.forEach(run)
}

function addRunners(
  effects: Set<ReactiveEffect>,
  computedRunners: Set<ReactiveEffect>,
  effectsToAdd: Set<ReactiveEffect> | undefined
) {
  if (effectsToAdd !== void 0) {
    effectsToAdd.forEach(effect => {
      if (effect.computed) {
        computedRunners.add(effect)
      } else {
        effects.add(effect)
      }
    })
  }
} 

 it('should work when chained', () => {
    const value = reactive({ foo: 0 })
    const c1 = computed(() => value.foo)
    const c2 = computed(() => c1.value + 1)
    expect(c2.value).toBe(1)
    expect(c1.value).toBe(0)
    value.foo++
    expect(c2.value).toBe(2)
    expect(c1.value).toBe(1)
  }) 

### [](https://hackmd.io/ZfQArpjoQ8GrGqCABYpPpQ?view#Triggered-effect-when-chained "Triggered-effect-when-chained")Triggered effect when chained

接下來來講一個當一般的 effect 依賴於 computed 時會發生什麼事情。

以此例來說，這時候的依賴為 `effect -> c2 -> c1 -> value`，effect 因為不是 lazy 所以會直接 run，以下直接用先前的文字順序表達

1.  `push effect, activeReactiveEffectStack => [ effect ]`
2.  `effect run fn // which is dummy = c2.value`
3.  `push c2, activeReactiveEffectStack => [ effect, c2 ]`
4.  `c2 run fn // which is c1.value + 1`
5.  `push c1, activeReactiveEffectStack => [ effect, c2, c1 ]`
6.  `c1 run fn // which is value.foo`
7.  `value 依賴於 activeReactiveEffectStack top // 也就是 c1`
8.  `pop c1, activeReactiveEffectStack => [ effect, c2 ]`
9.  `c1 run trackChildRun，將 activeReactiveEffectStack top 也就是 c2 依賴於 c1 的所有依賴`
10.  `pop c2, activeReactiveEffectStack => [ effect ]`
11.  `c2 run trackChildRun，將 activeReactiveEffectStack top 也就是 effect 依賴於 c2 的所有依賴 (而又此時 c2 擁有 c1 的所有依賴，所以也就是 c1, c2 兩者的所有依賴`
12.  `pop effect, activeReactiveEffectStack => []`

這時候就很簡單了，dummy 在 12 行當然會是 1， `getter1` 與 `getter2` 也都執行一次，接著 value.foo++ ，觸發了三個依賴者 `effect` 、 `c2` 、 `c1`，而當然 `computedRunners` 與 `effects` 都是集合，所以必定只會執行一次，也都會觸發各自的 function，這個 Test Case 就完成了。

let dummy
effect(() => {
  dummy = c2.value
})
expect(dummy).toBe(1)
expect(getter1).toHaveBeenCalledTimes(1)
expect(getter2).toHaveBeenCalledTimes(1)
value.foo++
expect(dummy).toBe(2)
// should not result in duplicate calls
expect(getter1).toHaveBeenCalledTimes(2)
expect(getter2).toHaveBeenCalledTimes(2)

這樣就可以解釋所有 computed 的情況是多麼複雜與艱辛，但困難的還在後頭，之後這個系列的文章會慢慢地往 core 或是 virtual-dom 的地方邁進。