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

87 lines
2.3 KiB
TypeScript
Raw Normal View History

2019-08-16 21:42:46 +08:00
import { effect, ReactiveEffect, activeReactiveEffectStack } from './effect'
import { UnwrapNestedRefs, isRefSymbol, knownRefs } 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> {
[isRefSymbol]: true
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 WritableComputedRef<T> {
[isRefSymbol]: true
value: UnwrapNestedRefs<T>
readonly effect: ReactiveEffect
}
export interface WritableComputedOptions<T> {
get: () => T
set: (v: T) => void
}
export function computed<T>(getter: () => T): ComputedRef<T>
2019-06-06 12:35:49 +08:00
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
? null
: (getterOrOptions as WritableComputedOptions<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
}
})
const computedRef = {
2019-05-29 18:44:50 +08:00
// 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
}
}
knownRefs.add(computedRef)
return computedRef
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)
}
}
}
}