import { IfAny } from '@vue/shared'; export declare enum TrackOpTypes { GET = "get", HAS = "has", ITERATE = "iterate" } export declare enum TriggerOpTypes { SET = "set", ADD = "add", DELETE = "delete", CLEAR = "clear" } export declare enum ReactiveFlags { SKIP = "__v_skip", IS_REACTIVE = "__v_isReactive", IS_READONLY = "__v_isReadonly", IS_SHALLOW = "__v_isShallow", RAW = "__v_raw" } type Dep = Map & { cleanup: () => void; computed?: ComputedRefImpl; }; export declare class EffectScope { detached: boolean; constructor(detached?: boolean); get active(): boolean; run(fn: () => T): T | undefined; 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; 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 | Set; }; export declare class ReactiveEffect { fn: () => T; trigger: () => void; scheduler?: EffectScheduler | undefined; active: boolean; deps: Dep[]; onStop?: () => void; onTrack?: (event: DebuggerEvent) => void; onTrigger?: (event: DebuggerEvent) => void; constructor(fn: () => T, trigger: () => void, scheduler?: EffectScheduler | undefined, scope?: EffectScope); get dirty(): boolean; set dirty(v: boolean); run(): T; 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; 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(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; export declare function pauseScheduling(): void; export declare function resetScheduling(): void; declare const ComputedRefSymbol: unique symbol; export interface ComputedRef extends WritableComputedRef { readonly value: T; [ComputedRefSymbol]: true; } export interface WritableComputedRef extends Ref { readonly effect: ReactiveEffect; } export type ComputedGetter = (oldValue?: T) => T; export type ComputedSetter = (newValue: T) => void; export interface WritableComputedOptions { get: ComputedGetter; set: ComputedSetter; } export declare class ComputedRefImpl { private getter; private readonly _setter; dep?: Dep; private _value; readonly effect: ReactiveEffect; readonly __v_isRef = true; readonly [ReactiveFlags.IS_READONLY]: boolean; _cacheable: boolean; /** * Dev only */ _warnRecursive?: boolean; constructor(getter: ComputedGetter, _setter: ComputedSetter, isReadonly: boolean, isSSR: boolean); get value(): T; set value(newValue: T); get _dirty(): boolean; set _dirty(v: boolean); } /** * 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(getter: ComputedGetter, debugOptions?: DebuggerOptions): ComputedRef; export declare function computed(options: WritableComputedOptions, debugOptions?: DebuggerOptions): WritableComputedRef; export type UnwrapNestedRefs = T extends Ref ? T : UnwrapRefSimple; declare const ReactiveMarkerSymbol: unique symbol; export declare class ReactiveMarker { private [ReactiveMarkerSymbol]?; } export type Reactive = UnwrapNestedRefs & (T extends readonly any[] ? ReactiveMarker : {}); /** * 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(target: T): Reactive; declare const ShallowReactiveMarker: unique symbol; export type ShallowReactive = 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(target: T): ShallowReactive; type Primitive = string | number | boolean | bigint | symbol | undefined | null; type Builtin = Primitive | Function | Date | Error | RegExp; export type DeepReadonly = T extends Builtin ? T : T extends Map ? ReadonlyMap, DeepReadonly> : T extends ReadonlyMap ? ReadonlyMap, DeepReadonly> : T extends WeakMap ? WeakMap, DeepReadonly> : T extends Set ? ReadonlySet> : T extends ReadonlySet ? ReadonlySet> : T extends WeakSet ? WeakSet> : T extends Promise ? Promise> : T extends Ref ? Readonly>> : T extends {} ? { readonly [K in keyof T]: DeepReadonly; } : Readonly; /** * 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(target: T): DeepReadonly>; /** * 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(target: T): Readonly; /** * 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: any): 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(observed: T): T; export type Raw = 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(value: T): Raw; declare const RefSymbol: unique symbol; declare const RawSymbol: unique symbol; export interface Ref { 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(r: Ref | unknown): r is Ref; /** * 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(value: T): Ref>; export declare function ref(): Ref; declare const ShallowRefMarker: unique symbol; export type ShallowRef = Ref & { [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(value: T): Ref extends T ? T extends Ref ? IfAny, T> : ShallowRef : ShallowRef; export declare function shallowRef(): ShallowRef; /** * 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 | Ref; export type MaybeRefOrGetter = MaybeRef | (() => 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) { * 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(ref: MaybeRef | ComputedRef | ShallowRef): 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(source: MaybeRefOrGetter | ComputedRef | ShallowRef): 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(objectWithRefs: T): ShallowUnwrapRef; export type CustomRefFactory = (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(factory: CustomRefFactory): Ref; export type ToRefs = { [K in keyof T]: ToRef; }; /** * 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(object: T): ToRefs; export type ToRef = IfAny, [T] extends [Ref] ? T : Ref>; /** * 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(value: T): T extends () => infer R ? Readonly> : T extends Ref ? T : Ref>; export declare function toRef(object: T, key: K): ToRef; export declare function toRef(object: T, key: K, defaultValue: T[K]): ToRef>; /** * 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 = { [K in keyof T]: DistributeRef; }; type DistributeRef = T extends Ref ? V : T; export type UnwrapRef = T extends ShallowRef ? V : T extends Ref ? UnwrapRefSimple : UnwrapRefSimple; type UnwrapRefSimple = T extends Builtin | Ref | RefUnwrapBailTypes[keyof RefUnwrapBailTypes] | { [RawSymbol]?: true; } ? T : T extends Map ? Map> & UnwrapRef>> : T extends WeakMap ? WeakMap> & UnwrapRef>> : T extends Set ? Set> & UnwrapRef>> : T extends WeakSet ? WeakSet> & UnwrapRef>> : T extends ReadonlyArray ? { [K in keyof T]: UnwrapRefSimple; } : T extends object & { [ShallowReactiveMarker]?: never; } ? { [P in keyof T]: P extends symbol ? T[P] : UnwrapRef; } : T; /** * @deprecated use `computed` instead. See #5912 */ export declare const deferredComputed: typeof computed; export declare const ITERATE_KEY: unique symbol; /** * 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 | Set): void;