vue3-yuanma/packages/reactivity/src/computed.ts

76 lines
2.1 KiB
TypeScript
Raw Normal View History

2019-08-16 21:42:46 +08:00
import { effect, ReactiveEffect, activeReactiveEffectStack } from './effect'
import { UnwrapNestedRefs, knownRefs, Ref } from './ref'
import { isFunction } from '@vue/shared'
2018-09-19 23:35:38 +08:00
2019-08-16 21:42:46 +08:00
export interface ComputedRef<T> {
2019-08-16 22:52:45 +08:00
readonly value: UnwrapNestedRefs<T>
2019-05-29 18:44:50 +08:00
readonly effect: ReactiveEffect
2018-09-19 23:35:38 +08:00
}
export interface ComputedOptions<T> {
get: () => T
set: (v: T) => void
}
export function computed<T>(getter: () => T): ComputedRef<T>
export function computed<T>(options: ComputedOptions<T>): Ref<T>
2019-06-06 12:35:49 +08:00
export function computed<T>(
getterOrOptions: (() => T) | ComputedOptions<T>
): Ref<T> {
const isReadonly = isFunction(getterOrOptions)
const getter = isReadonly
? (getterOrOptions as (() => T))
: (getterOrOptions as ComputedOptions<T>).get
const setter = isReadonly ? null : (getterOrOptions as ComputedOptions<T>).set
2018-09-19 23:35:38 +08:00
let dirty: boolean = true
let value: any = undefined
2019-06-06 12:35:49 +08:00
const runner = effect(getter, {
2018-09-19 23:35:38 +08:00
lazy: true,
2019-05-29 23:44:59 +08:00
// mark effect as computed so that it gets priority during trigger
computed: true,
2018-09-19 23:35:38 +08:00
scheduler: () => {
dirty = true
}
})
2019-05-29 18:44:50 +08:00
const computedValue = {
// 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
2019-06-06 12:35:49 +08:00
},
set value(newValue) {
if (setter) {
setter(newValue)
} else {
// TODO warn attempting to mutate readonly computed value
}
2019-05-29 18:44:50 +08:00
}
}
2019-08-20 21:38:00 +08:00
knownRefs.add(computedValue)
2019-05-29 18:44:50 +08:00
return computedValue
2018-09-19 23:35:38 +08:00
}
2018-11-14 00:03:35 +08:00
function trackChildRun(childRunner: ReactiveEffect) {
const parentRunner =
activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
2018-09-19 23:35:38 +08:00
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)
}
}
}
}