import { effect, ReactiveEffect, activeReactiveEffectStack } from './effect' import { Ref, refSymbol, UnwrapNestedRefs } from './ref' import { isFunction } from '@vue/shared' export interface ComputedRef extends Ref { readonly value: UnwrapNestedRefs readonly effect: ReactiveEffect } export interface WritableComputedRef extends Ref { readonly effect: ReactiveEffect } export interface WritableComputedOptions { get: () => T set: (v: T) => void } export function computed(getter: () => T): ComputedRef export function computed( options: WritableComputedOptions ): WritableComputedRef export function computed( getterOrOptions: (() => T) | WritableComputedOptions ): any { const isReadonly = isFunction(getterOrOptions) const getter = isReadonly ? (getterOrOptions as (() => T)) : (getterOrOptions as WritableComputedOptions).get const setter = isReadonly ? () => { if (__DEV__) { console.warn('Write operation failed: computed value is readonly') } } : (getterOrOptions as WritableComputedOptions).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 } }) 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) } } } function trackChildRun(childRunner: ReactiveEffect) { const parentRunner = activeReactiveEffectStack[activeReactiveEffectStack.length - 1] if (parentRunner) { for (let i = 0; i < childRunner.deps.length; i++) { const dep = childRunner.deps[i] if (!dep.has(parentRunner)) { dep.add(parentRunner) parentRunner.deps.push(dep) } } } }