676 lines
23 KiB
TypeScript
676 lines
23 KiB
TypeScript
import { IfAny } from '@vue/shared';
|
|
|
|
export declare const enum ReactiveFlags {
|
|
SKIP = "__v_skip",
|
|
IS_REACTIVE = "__v_isReactive",
|
|
IS_READONLY = "__v_isReadonly",
|
|
IS_SHALLOW = "__v_isShallow",
|
|
RAW = "__v_raw"
|
|
}
|
|
export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;
|
|
/**
|
|
* Returns a reactive proxy of the object.
|
|
*
|
|
* The reactive conversion is "deep": it affects all nested properties. A
|
|
* reactive object also deeply unwraps any properties that are refs while
|
|
* maintaining reactivity.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const obj = reactive({ count: 0 })
|
|
* ```
|
|
*
|
|
* @param target - The source object.
|
|
* @see {@link https://vuejs.org/api/reactivity-core.html#reactive}
|
|
*/
|
|
export declare function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;
|
|
declare const ShallowReactiveMarker: unique symbol;
|
|
export type ShallowReactive<T> = T & {
|
|
[ShallowReactiveMarker]?: true;
|
|
};
|
|
/**
|
|
* Shallow version of {@link reactive()}.
|
|
*
|
|
* Unlike {@link reactive()}, there is no deep conversion: only root-level
|
|
* properties are reactive for a shallow reactive object. Property values are
|
|
* stored and exposed as-is - this also means properties with ref values will
|
|
* not be automatically unwrapped.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const state = shallowReactive({
|
|
* foo: 1,
|
|
* nested: {
|
|
* bar: 2
|
|
* }
|
|
* })
|
|
*
|
|
* // mutating state's own properties is reactive
|
|
* state.foo++
|
|
*
|
|
* // ...but does not convert nested objects
|
|
* isReactive(state.nested) // false
|
|
*
|
|
* // NOT reactive
|
|
* state.nested.bar++
|
|
* ```
|
|
*
|
|
* @param target - The source object.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreactive}
|
|
*/
|
|
export declare function shallowReactive<T extends object>(target: T): ShallowReactive<T>;
|
|
type Primitive = string | number | boolean | bigint | symbol | undefined | null;
|
|
type Builtin = Primitive | Function | Date | Error | RegExp;
|
|
export type DeepReadonly<T> = T extends Builtin ? T : T extends Map<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends ReadonlyMap<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends WeakMap<infer K, infer V> ? WeakMap<DeepReadonly<K>, DeepReadonly<V>> : T extends Set<infer U> ? ReadonlySet<DeepReadonly<U>> : T extends ReadonlySet<infer U> ? ReadonlySet<DeepReadonly<U>> : T extends WeakSet<infer U> ? WeakSet<DeepReadonly<U>> : T extends Promise<infer U> ? Promise<DeepReadonly<U>> : T extends Ref<infer U> ? Readonly<Ref<DeepReadonly<U>>> : T extends {} ? {
|
|
readonly [K in keyof T]: DeepReadonly<T[K]>;
|
|
} : Readonly<T>;
|
|
/**
|
|
* Takes an object (reactive or plain) or a ref and returns a readonly proxy to
|
|
* the original.
|
|
*
|
|
* A readonly proxy is deep: any nested property accessed will be readonly as
|
|
* well. It also has the same ref-unwrapping behavior as {@link reactive()},
|
|
* except the unwrapped values will also be made readonly.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const original = reactive({ count: 0 })
|
|
*
|
|
* const copy = readonly(original)
|
|
*
|
|
* watchEffect(() => {
|
|
* // works for reactivity tracking
|
|
* console.log(copy.count)
|
|
* })
|
|
*
|
|
* // mutating original will trigger watchers relying on the copy
|
|
* original.count++
|
|
*
|
|
* // mutating the copy will fail and result in a warning
|
|
* copy.count++ // warning!
|
|
* ```
|
|
*
|
|
* @param target - The source object.
|
|
* @see {@link https://vuejs.org/api/reactivity-core.html#readonly}
|
|
*/
|
|
export declare function readonly<T extends object>(target: T): DeepReadonly<UnwrapNestedRefs<T>>;
|
|
/**
|
|
* Shallow version of {@link readonly()}.
|
|
*
|
|
* Unlike {@link readonly()}, there is no deep conversion: only root-level
|
|
* properties are made readonly. Property values are stored and exposed as-is -
|
|
* this also means properties with ref values will not be automatically
|
|
* unwrapped.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const state = shallowReadonly({
|
|
* foo: 1,
|
|
* nested: {
|
|
* bar: 2
|
|
* }
|
|
* })
|
|
*
|
|
* // mutating state's own properties will fail
|
|
* state.foo++
|
|
*
|
|
* // ...but works on nested objects
|
|
* isReadonly(state.nested) // false
|
|
*
|
|
* // works
|
|
* state.nested.bar++
|
|
* ```
|
|
*
|
|
* @param target - The source object.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreadonly}
|
|
*/
|
|
export declare function shallowReadonly<T extends object>(target: T): Readonly<T>;
|
|
/**
|
|
* Checks if an object is a proxy created by {@link reactive()} or
|
|
* {@link shallowReactive()} (or {@link ref()} in some cases).
|
|
*
|
|
* @example
|
|
* ```js
|
|
* isReactive(reactive({})) // => true
|
|
* isReactive(readonly(reactive({}))) // => true
|
|
* isReactive(ref({}).value) // => true
|
|
* isReactive(readonly(ref({})).value) // => true
|
|
* isReactive(ref(true)) // => false
|
|
* isReactive(shallowRef({}).value) // => false
|
|
* isReactive(shallowReactive({})) // => true
|
|
* ```
|
|
*
|
|
* @param value - The value to check.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isreactive}
|
|
*/
|
|
export declare function isReactive(value: unknown): boolean;
|
|
/**
|
|
* Checks whether the passed value is a readonly object. The properties of a
|
|
* readonly object can change, but they can't be assigned directly via the
|
|
* passed object.
|
|
*
|
|
* The proxies created by {@link readonly()} and {@link shallowReadonly()} are
|
|
* both considered readonly, as is a computed ref without a set function.
|
|
*
|
|
* @param value - The value to check.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isreadonly}
|
|
*/
|
|
export declare function isReadonly(value: unknown): boolean;
|
|
export declare function isShallow(value: unknown): boolean;
|
|
/**
|
|
* Checks if an object is a proxy created by {@link reactive},
|
|
* {@link readonly}, {@link shallowReactive} or {@link shallowReadonly()}.
|
|
*
|
|
* @param value - The value to check.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isproxy}
|
|
*/
|
|
export declare function isProxy(value: unknown): boolean;
|
|
/**
|
|
* Returns the raw, original object of a Vue-created proxy.
|
|
*
|
|
* `toRaw()` can return the original object from proxies created by
|
|
* {@link reactive()}, {@link readonly()}, {@link shallowReactive()} or
|
|
* {@link shallowReadonly()}.
|
|
*
|
|
* This is an escape hatch that can be used to temporarily read without
|
|
* incurring proxy access / tracking overhead or write without triggering
|
|
* changes. It is **not** recommended to hold a persistent reference to the
|
|
* original object. Use with caution.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const foo = {}
|
|
* const reactiveFoo = reactive(foo)
|
|
*
|
|
* console.log(toRaw(reactiveFoo) === foo) // true
|
|
* ```
|
|
*
|
|
* @param observed - The object for which the "raw" value is requested.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#toraw}
|
|
*/
|
|
export declare function toRaw<T>(observed: T): T;
|
|
export type Raw<T> = T & {
|
|
[RawSymbol]?: true;
|
|
};
|
|
/**
|
|
* Marks an object so that it will never be converted to a proxy. Returns the
|
|
* object itself.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const foo = markRaw({})
|
|
* console.log(isReactive(reactive(foo))) // false
|
|
*
|
|
* // also works when nested inside other reactive objects
|
|
* const bar = reactive({ foo })
|
|
* console.log(isReactive(bar.foo)) // false
|
|
* ```
|
|
*
|
|
* **Warning:** `markRaw()` together with the shallow APIs such as
|
|
* {@link shallowReactive()} allow you to selectively opt-out of the default
|
|
* deep reactive/readonly conversion and embed raw, non-proxied objects in your
|
|
* state graph.
|
|
*
|
|
* @param value - The object to be marked as "raw".
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#markraw}
|
|
*/
|
|
export declare function markRaw<T extends object>(value: T): Raw<T>;
|
|
|
|
type CollectionTypes = IterableCollections | WeakCollections;
|
|
type IterableCollections = Map<any, any> | Set<any>;
|
|
type WeakCollections = WeakMap<any, any> | WeakSet<any>;
|
|
|
|
export declare const enum TrackOpTypes {
|
|
GET = "get",
|
|
HAS = "has",
|
|
ITERATE = "iterate"
|
|
}
|
|
export declare const enum TriggerOpTypes {
|
|
SET = "set",
|
|
ADD = "add",
|
|
DELETE = "delete",
|
|
CLEAR = "clear"
|
|
}
|
|
|
|
export declare class EffectScope {
|
|
detached: boolean;
|
|
/* removed internal: _active */
|
|
/* removed internal: effects */
|
|
/* removed internal: cleanups */
|
|
/* removed internal: parent */
|
|
/* removed internal: scopes */
|
|
/* removed internal: index */
|
|
constructor(detached?: boolean);
|
|
get active(): boolean;
|
|
run<T>(fn: () => T): T | undefined;
|
|
/* removed internal: on */
|
|
/* removed internal: off */
|
|
stop(fromParent?: boolean): void;
|
|
}
|
|
/**
|
|
* Creates an effect scope object which can capture the reactive effects (i.e.
|
|
* computed and watchers) created within it so that these effects can be
|
|
* disposed together. For detailed use cases of this API, please consult its
|
|
* corresponding {@link https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md | RFC}.
|
|
*
|
|
* @param detached - Can be used to create a "detached" effect scope.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope}
|
|
*/
|
|
export declare function effectScope(detached?: boolean): EffectScope;
|
|
/**
|
|
* Returns the current active effect scope if there is one.
|
|
*
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#getcurrentscope}
|
|
*/
|
|
export declare function getCurrentScope(): EffectScope | undefined;
|
|
/**
|
|
* Registers a dispose callback on the current active effect scope. The
|
|
* callback will be invoked when the associated effect scope is stopped.
|
|
*
|
|
* @param fn - The callback function to attach to the scope's cleanup.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#onscopedispose}
|
|
*/
|
|
export declare function onScopeDispose(fn: () => void): void;
|
|
|
|
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>;
|
|
}
|
|
declare class ComputedRefImpl<T> {
|
|
private readonly _setter;
|
|
dep?: Dep;
|
|
private _value;
|
|
readonly effect: ReactiveEffect<T>;
|
|
readonly __v_isRef = true;
|
|
readonly [ReactiveFlags.IS_READONLY]: boolean;
|
|
_dirty: boolean;
|
|
_cacheable: boolean;
|
|
constructor(getter: ComputedGetter<T>, _setter: ComputedSetter<T>, isReadonly: boolean, isSSR: boolean);
|
|
get value(): T;
|
|
set value(newValue: T);
|
|
}
|
|
/**
|
|
* Takes a getter function and returns a readonly reactive ref object for the
|
|
* returned value from the getter. It can also take an object with get and set
|
|
* functions to create a writable ref object.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* // Creating a readonly computed ref:
|
|
* const count = ref(1)
|
|
* const plusOne = computed(() => count.value + 1)
|
|
*
|
|
* console.log(plusOne.value) // 2
|
|
* plusOne.value++ // error
|
|
* ```
|
|
*
|
|
* ```js
|
|
* // Creating a writable computed ref:
|
|
* const count = ref(1)
|
|
* const plusOne = computed({
|
|
* get: () => count.value + 1,
|
|
* set: (val) => {
|
|
* count.value = val - 1
|
|
* }
|
|
* })
|
|
*
|
|
* plusOne.value = 1
|
|
* console.log(count.value) // 0
|
|
* ```
|
|
*
|
|
* @param getter - Function that produces the next value.
|
|
* @param debugOptions - For debugging. See {@link https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging}.
|
|
* @see {@link https://vuejs.org/api/reactivity-core.html#computed}
|
|
*/
|
|
export declare function computed<T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
|
|
export declare function computed<T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions): WritableComputedRef<T>;
|
|
|
|
export type EffectScheduler = (...args: any[]) => any;
|
|
export type DebuggerEvent = {
|
|
effect: ReactiveEffect;
|
|
} & DebuggerEventExtraInfo;
|
|
export type DebuggerEventExtraInfo = {
|
|
target: object;
|
|
type: TrackOpTypes | TriggerOpTypes;
|
|
key: any;
|
|
newValue?: any;
|
|
oldValue?: any;
|
|
oldTarget?: Map<any, any> | Set<any>;
|
|
};
|
|
export declare const ITERATE_KEY: unique symbol;
|
|
export declare class ReactiveEffect<T = any> {
|
|
fn: () => T;
|
|
scheduler: EffectScheduler | null;
|
|
active: boolean;
|
|
deps: Dep[];
|
|
parent: ReactiveEffect | undefined;
|
|
/* removed internal: computed */
|
|
/* removed internal: allowRecurse */
|
|
/* removed internal: deferStop */
|
|
onStop?: () => void;
|
|
onTrack?: (event: DebuggerEvent) => void;
|
|
onTrigger?: (event: DebuggerEvent) => void;
|
|
constructor(fn: () => T, scheduler?: EffectScheduler | null, scope?: EffectScope);
|
|
run(): T | undefined;
|
|
stop(): void;
|
|
}
|
|
export interface DebuggerOptions {
|
|
onTrack?: (event: DebuggerEvent) => void;
|
|
onTrigger?: (event: DebuggerEvent) => void;
|
|
}
|
|
export interface ReactiveEffectOptions extends DebuggerOptions {
|
|
lazy?: boolean;
|
|
scheduler?: EffectScheduler;
|
|
scope?: EffectScope;
|
|
allowRecurse?: boolean;
|
|
onStop?: () => void;
|
|
}
|
|
export interface ReactiveEffectRunner<T = any> {
|
|
(): T;
|
|
effect: ReactiveEffect;
|
|
}
|
|
/**
|
|
* Registers the given function to track reactive updates.
|
|
*
|
|
* The given function will be run once immediately. Every time any reactive
|
|
* property that's accessed within it gets updated, the function will run again.
|
|
*
|
|
* @param fn - The function that will track reactive updates.
|
|
* @param options - Allows to control the effect's behaviour.
|
|
* @returns A runner that can be used to control the effect after creation.
|
|
*/
|
|
export declare function effect<T = any>(fn: () => T, options?: ReactiveEffectOptions): ReactiveEffectRunner;
|
|
/**
|
|
* Stops the effect associated with the given runner.
|
|
*
|
|
* @param runner - Association with the effect to stop tracking.
|
|
*/
|
|
export declare function stop(runner: ReactiveEffectRunner): void;
|
|
/**
|
|
* Temporarily pauses tracking.
|
|
*/
|
|
export declare function pauseTracking(): void;
|
|
/**
|
|
* Re-enables effect tracking (if it was paused).
|
|
*/
|
|
export declare function enableTracking(): void;
|
|
/**
|
|
* Resets the previous global effect tracking state.
|
|
*/
|
|
export declare function resetTracking(): void;
|
|
/**
|
|
* Tracks access to a reactive property.
|
|
*
|
|
* This will check which effect is running at the moment and record it as dep
|
|
* which records all effects that depend on the reactive property.
|
|
*
|
|
* @param target - Object holding the reactive property.
|
|
* @param type - Defines the type of access to the reactive property.
|
|
* @param key - Identifier of the reactive property to track.
|
|
*/
|
|
export declare function track(target: object, type: TrackOpTypes, key: unknown): void;
|
|
/**
|
|
* Finds all deps associated with the target (or a specific property) and
|
|
* triggers the effects stored within.
|
|
*
|
|
* @param target - The reactive object.
|
|
* @param type - Defines the type of the operation that needs to trigger effects.
|
|
* @param key - Can be used to target a specific reactive property in the target object.
|
|
*/
|
|
export declare function trigger(target: object, type: TriggerOpTypes, key?: unknown, newValue?: unknown, oldValue?: unknown, oldTarget?: Map<unknown, unknown> | Set<unknown>): void;
|
|
|
|
type Dep = Set<ReactiveEffect> & TrackedMarkers;
|
|
/**
|
|
* wasTracked and newTracked maintain the status for several levels of effect
|
|
* tracking recursion. One bit per level is used to define whether the dependency
|
|
* was/is tracked.
|
|
*/
|
|
type TrackedMarkers = {
|
|
/**
|
|
* wasTracked
|
|
*/
|
|
w: number;
|
|
/**
|
|
* newTracked
|
|
*/
|
|
n: number;
|
|
};
|
|
|
|
declare const RefSymbol: unique symbol;
|
|
declare const RawSymbol: unique symbol;
|
|
export interface Ref<T = any> {
|
|
value: T;
|
|
/**
|
|
* Type differentiator only.
|
|
* We need this to be in public d.ts but don't want it to show up in IDE
|
|
* autocomplete, so we use a private Symbol instead.
|
|
*/
|
|
[RefSymbol]: true;
|
|
}
|
|
/**
|
|
* Checks if a value is a ref object.
|
|
*
|
|
* @param r - The value to inspect.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isref}
|
|
*/
|
|
export declare function isRef<T>(r: Ref<T> | unknown): r is Ref<T>;
|
|
/**
|
|
* Takes an inner value and returns a reactive and mutable ref object, which
|
|
* has a single property `.value` that points to the inner value.
|
|
*
|
|
* @param value - The object to wrap in the ref.
|
|
* @see {@link https://vuejs.org/api/reactivity-core.html#ref}
|
|
*/
|
|
export declare function ref<T extends Ref>(value: T): T;
|
|
export declare function ref<T>(value: T): Ref<UnwrapRef<T>>;
|
|
export declare function ref<T = any>(): Ref<T | undefined>;
|
|
declare const ShallowRefMarker: unique symbol;
|
|
export type ShallowRef<T = any> = Ref<T> & {
|
|
[ShallowRefMarker]?: true;
|
|
};
|
|
/**
|
|
* Shallow version of {@link ref()}.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const state = shallowRef({ count: 1 })
|
|
*
|
|
* // does NOT trigger change
|
|
* state.value.count = 2
|
|
*
|
|
* // does trigger change
|
|
* state.value = { count: 2 }
|
|
* ```
|
|
*
|
|
* @param value - The "inner value" for the shallow ref.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
|
|
*/
|
|
export declare function shallowRef<T extends object>(value: T): T extends Ref ? T : ShallowRef<T>;
|
|
export declare function shallowRef<T>(value: T): ShallowRef<T>;
|
|
export declare function shallowRef<T = any>(): ShallowRef<T | undefined>;
|
|
/**
|
|
* Force trigger effects that depends on a shallow ref. This is typically used
|
|
* after making deep mutations to the inner value of a shallow ref.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const shallow = shallowRef({
|
|
* greet: 'Hello, world'
|
|
* })
|
|
*
|
|
* // Logs "Hello, world" once for the first run-through
|
|
* watchEffect(() => {
|
|
* console.log(shallow.value.greet)
|
|
* })
|
|
*
|
|
* // This won't trigger the effect because the ref is shallow
|
|
* shallow.value.greet = 'Hello, universe'
|
|
*
|
|
* // Logs "Hello, universe"
|
|
* triggerRef(shallow)
|
|
* ```
|
|
*
|
|
* @param ref - The ref whose tied effects shall be executed.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#triggerref}
|
|
*/
|
|
export declare function triggerRef(ref: Ref): void;
|
|
export type MaybeRef<T = any> = T | Ref<T>;
|
|
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T);
|
|
/**
|
|
* Returns the inner value if the argument is a ref, otherwise return the
|
|
* argument itself. This is a sugar function for
|
|
* `val = isRef(val) ? val.value : val`.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* function useFoo(x: number | Ref<number>) {
|
|
* const unwrapped = unref(x)
|
|
* // unwrapped is guaranteed to be number now
|
|
* }
|
|
* ```
|
|
*
|
|
* @param ref - Ref or plain value to be converted into the plain value.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
|
|
*/
|
|
export declare function unref<T>(ref: MaybeRef<T>): T;
|
|
/**
|
|
* Normalizes values / refs / getters to values.
|
|
* This is similar to {@link unref()}, except that it also normalizes getters.
|
|
* If the argument is a getter, it will be invoked and its return value will
|
|
* be returned.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* toValue(1) // 1
|
|
* toValue(ref(1)) // 1
|
|
* toValue(() => 1) // 1
|
|
* ```
|
|
*
|
|
* @param source - A getter, an existing ref, or a non-function value.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
|
|
*/
|
|
export declare function toValue<T>(source: MaybeRefOrGetter<T>): T;
|
|
/**
|
|
* Returns a reactive proxy for the given object.
|
|
*
|
|
* If the object already is reactive, it's returned as-is. If not, a new
|
|
* reactive proxy is created. Direct child properties that are refs are properly
|
|
* handled, as well.
|
|
*
|
|
* @param objectWithRefs - Either an already-reactive object or a simple object
|
|
* that contains refs.
|
|
*/
|
|
export declare function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;
|
|
export type CustomRefFactory<T> = (track: () => void, trigger: () => void) => {
|
|
get: () => T;
|
|
set: (value: T) => void;
|
|
};
|
|
/**
|
|
* Creates a customized ref with explicit control over its dependency tracking
|
|
* and updates triggering.
|
|
*
|
|
* @param factory - The function that receives the `track` and `trigger` callbacks.
|
|
* @see {@link https://vuejs.org/api/reactivity-advanced.html#customref}
|
|
*/
|
|
export declare function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;
|
|
export type ToRefs<T = any> = {
|
|
[K in keyof T]: ToRef<T[K]>;
|
|
};
|
|
/**
|
|
* Converts a reactive object to a plain object where each property of the
|
|
* resulting object is a ref pointing to the corresponding property of the
|
|
* original object. Each individual ref is created using {@link toRef()}.
|
|
*
|
|
* @param object - Reactive object to be made into an object of linked refs.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#torefs}
|
|
*/
|
|
export declare function toRefs<T extends object>(object: T): ToRefs<T>;
|
|
export type ToRef<T> = IfAny<T, Ref<T>, [T] extends [Ref] ? T : Ref<T>>;
|
|
/**
|
|
* Used to normalize values / refs / getters into refs.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* // returns existing refs as-is
|
|
* toRef(existingRef)
|
|
*
|
|
* // creates a ref that calls the getter on .value access
|
|
* toRef(() => props.foo)
|
|
*
|
|
* // creates normal refs from non-function values
|
|
* // equivalent to ref(1)
|
|
* toRef(1)
|
|
* ```
|
|
*
|
|
* Can also be used to create a ref for a property on a source reactive object.
|
|
* The created ref is synced with its source property: mutating the source
|
|
* property will update the ref, and vice-versa.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* const state = reactive({
|
|
* foo: 1,
|
|
* bar: 2
|
|
* })
|
|
*
|
|
* const fooRef = toRef(state, 'foo')
|
|
*
|
|
* // mutating the ref updates the original
|
|
* fooRef.value++
|
|
* console.log(state.foo) // 2
|
|
*
|
|
* // mutating the original also updates the ref
|
|
* state.foo++
|
|
* console.log(fooRef.value) // 3
|
|
* ```
|
|
*
|
|
* @param source - A getter, an existing ref, a non-function value, or a
|
|
* reactive object to create a property ref from.
|
|
* @param [key] - (optional) Name of the property in the reactive object.
|
|
* @see {@link https://vuejs.org/api/reactivity-utilities.html#toref}
|
|
*/
|
|
export declare function toRef<T>(value: T): T extends () => infer R ? Readonly<Ref<R>> : T extends Ref ? T : Ref<UnwrapRef<T>>;
|
|
export declare function toRef<T extends object, K extends keyof T>(object: T, key: K): ToRef<T[K]>;
|
|
export declare function toRef<T extends object, K extends keyof T>(object: T, key: K, defaultValue: T[K]): ToRef<Exclude<T[K], undefined>>;
|
|
type BaseTypes = string | number | boolean;
|
|
/**
|
|
* This is a special exported interface for other packages to declare
|
|
* additional types that should bail out for ref unwrapping. For example
|
|
* \@vue/runtime-dom can declare it like so in its d.ts:
|
|
*
|
|
* ``` ts
|
|
* declare module '@vue/reactivity' {
|
|
* export interface RefUnwrapBailTypes {
|
|
* runtimeDOMBailTypes: Node | Window
|
|
* }
|
|
* }
|
|
* ```
|
|
*/
|
|
export interface RefUnwrapBailTypes {
|
|
}
|
|
export type ShallowUnwrapRef<T> = {
|
|
[K in keyof T]: T[K] extends Ref<infer V> ? V : T[K] extends Ref<infer V> | undefined ? unknown extends V ? undefined : V | undefined : T[K];
|
|
};
|
|
export type UnwrapRef<T> = T extends ShallowRef<infer V> ? V : T extends Ref<infer V> ? UnwrapRefSimple<V> : UnwrapRefSimple<T>;
|
|
type UnwrapRefSimple<T> = T extends Function | CollectionTypes | BaseTypes | Ref | RefUnwrapBailTypes[keyof RefUnwrapBailTypes] | {
|
|
[RawSymbol]?: true;
|
|
} ? T : T extends ReadonlyArray<any> ? {
|
|
[K in keyof T]: UnwrapRefSimple<T[K]>;
|
|
} : T extends object & {
|
|
[ShallowReactiveMarker]?: never;
|
|
} ? {
|
|
[P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>;
|
|
} : T;
|
|
|
|
export declare function deferredComputed<T>(getter: () => T): ComputedRef<T>;
|
|
|