2019-10-17 11:12:57 +08:00
|
|
|
import { effect, ReactiveEffect, effectStack } from './effect'
|
2019-10-17 09:36:17 +08:00
|
|
|
import { Ref, UnwrapRef } from './ref'
|
2019-10-10 00:22:08 +08:00
|
|
|
import { isFunction, NOOP } from '@vue/shared'
|
2018-09-19 23:35:38 +08:00
|
|
|
|
2019-11-02 10:54:01 +08:00
|
|
|
export interface ComputedRef<T = any> extends WritableComputedRef<T> {
|
2019-10-10 23:34:42 +08:00
|
|
|
readonly value: UnwrapRef<T>
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
|
2019-10-05 22:10:37 +08:00
|
|
|
export interface WritableComputedRef<T> extends Ref<T> {
|
2019-10-14 23:02:49 +08:00
|
|
|
readonly effect: ReactiveEffect<T>
|
2019-09-06 06:32:19 +08:00
|
|
|
}
|
|
|
|
|
2019-10-22 01:57:20 +08:00
|
|
|
export type ComputedGetter<T> = () => T
|
|
|
|
export type ComputedSetter<T> = (v: T) => void
|
|
|
|
|
2019-09-06 06:32:19 +08:00
|
|
|
export interface WritableComputedOptions<T> {
|
2019-10-22 01:57:20 +08:00
|
|
|
get: ComputedGetter<T>
|
|
|
|
set: ComputedSetter<T>
|
2019-08-20 21:45:28 +08:00
|
|
|
}
|
|
|
|
|
2019-10-22 01:57:20 +08:00
|
|
|
export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
|
2019-06-06 12:35:49 +08:00
|
|
|
export function computed<T>(
|
2019-09-06 06:32:19 +08:00
|
|
|
options: WritableComputedOptions<T>
|
|
|
|
): WritableComputedRef<T>
|
|
|
|
export function computed<T>(
|
2019-10-22 01:57:20 +08:00
|
|
|
getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
|
2019-10-22 23:26:48 +08:00
|
|
|
) {
|
2019-10-24 23:37:52 +08:00
|
|
|
let getter: ComputedGetter<T>
|
|
|
|
let setter: ComputedSetter<T>
|
|
|
|
|
|
|
|
if (isFunction(getterOrOptions)) {
|
|
|
|
getter = getterOrOptions
|
|
|
|
setter = __DEV__
|
2019-10-10 00:22:08 +08:00
|
|
|
? () => {
|
2019-10-10 00:20:53 +08:00
|
|
|
console.warn('Write operation failed: computed value is readonly')
|
|
|
|
}
|
2019-10-10 00:22:08 +08:00
|
|
|
: NOOP
|
2019-10-24 23:37:52 +08:00
|
|
|
} else {
|
|
|
|
getter = getterOrOptions.get
|
|
|
|
setter = getterOrOptions.set
|
|
|
|
}
|
2019-08-20 21:45:28 +08:00
|
|
|
|
2019-10-06 23:22:32 +08:00
|
|
|
let dirty = true
|
|
|
|
let value: T
|
2019-08-20 21:45:28 +08:00
|
|
|
|
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-09-30 22:52:50 +08:00
|
|
|
return {
|
2019-10-17 09:36:17 +08:00
|
|
|
_isRef: true,
|
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
|
|
|
},
|
2019-10-06 03:48:05 +08:00
|
|
|
set value(newValue: T) {
|
|
|
|
setter(newValue)
|
2019-05-29 18:44:50 +08:00
|
|
|
}
|
|
|
|
}
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
|
2018-11-14 00:03:35 +08:00
|
|
|
function trackChildRun(childRunner: ReactiveEffect) {
|
2019-10-17 11:12:57 +08:00
|
|
|
if (effectStack.length === 0) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
const parentRunner = effectStack[effectStack.length - 1]
|
|
|
|
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)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|