103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import { DebuggerOptions, ReactiveEffect } from './effect'
|
|
import { Ref, trackRefValue, triggerRefValue } from './ref'
|
|
import { isFunction, NOOP } from '@vue/shared'
|
|
import { ReactiveFlags, toRaw } from './reactive'
|
|
import { Dep } from './dep'
|
|
|
|
declare const ComputedRefSymbol: unique symbol
|
|
|
|
export interface ComputedRef<T = any> extends WritableComputedRef<T> {
|
|
readonly value: T
|
|
[ComputedRefSymbol]: true
|
|
}
|
|
|
|
export interface WritableComputedRef<T> extends Ref<T> {
|
|
readonly effect: ReactiveEffect<T>
|
|
}
|
|
|
|
export type ComputedGetter<T> = (...args: any[]) => T
|
|
export type ComputedSetter<T> = (v: T) => void
|
|
|
|
export interface WritableComputedOptions<T> {
|
|
get: ComputedGetter<T>
|
|
set: ComputedSetter<T>
|
|
}
|
|
|
|
class ComputedRefImpl<T> {
|
|
public dep?: Dep = undefined
|
|
|
|
private _value!: T
|
|
private _dirty = true
|
|
public readonly effect: ReactiveEffect<T>
|
|
|
|
public readonly __v_isRef = true
|
|
public readonly [ReactiveFlags.IS_READONLY]: boolean
|
|
|
|
constructor(
|
|
getter: ComputedGetter<T>,
|
|
private readonly _setter: ComputedSetter<T>,
|
|
isReadonly: boolean
|
|
) {
|
|
this.effect = new ReactiveEffect(getter, () => {
|
|
if (!this._dirty) {
|
|
this._dirty = true
|
|
triggerRefValue(this)
|
|
}
|
|
})
|
|
this[ReactiveFlags.IS_READONLY] = isReadonly
|
|
}
|
|
|
|
get value() {
|
|
// the computed ref may get wrapped by other proxies e.g. readonly() #3376
|
|
const self = toRaw(this)
|
|
trackRefValue(self)
|
|
if (self._dirty) {
|
|
self._dirty = false
|
|
self._value = self.effect.run()!
|
|
}
|
|
return self._value
|
|
}
|
|
|
|
set value(newValue: T) {
|
|
this._setter(newValue)
|
|
}
|
|
}
|
|
|
|
export function computed<T>(
|
|
getter: ComputedGetter<T>,
|
|
debugOptions?: DebuggerOptions
|
|
): ComputedRef<T>
|
|
export function computed<T>(
|
|
options: WritableComputedOptions<T>,
|
|
debugOptions?: DebuggerOptions
|
|
): WritableComputedRef<T>
|
|
export function computed<T>(
|
|
getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
|
|
debugOptions?: DebuggerOptions
|
|
) {
|
|
let getter: ComputedGetter<T>
|
|
let setter: ComputedSetter<T>
|
|
|
|
const onlyGetter = isFunction(getterOrOptions)
|
|
if (onlyGetter) {
|
|
getter = getterOrOptions
|
|
setter = __DEV__
|
|
? () => {
|
|
console.warn('Write operation failed: computed value is readonly')
|
|
}
|
|
: NOOP
|
|
} else {
|
|
getter = getterOrOptions.get
|
|
setter = getterOrOptions.set
|
|
}
|
|
|
|
const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter)
|
|
|
|
if (__DEV__ && debugOptions) {
|
|
cRef.effect.onTrack = debugOptions.onTrack
|
|
cRef.effect.onTrigger = debugOptions.onTrigger
|
|
}
|
|
|
|
return cRef as any
|
|
}
|