[57e58a3] | 1 | import { IfAny } from '@vue/shared';
|
---|
| 2 |
|
---|
| 3 | export declare enum TrackOpTypes {
|
---|
| 4 | GET = "get",
|
---|
| 5 | HAS = "has",
|
---|
| 6 | ITERATE = "iterate"
|
---|
| 7 | }
|
---|
| 8 | export declare enum TriggerOpTypes {
|
---|
| 9 | SET = "set",
|
---|
| 10 | ADD = "add",
|
---|
| 11 | DELETE = "delete",
|
---|
| 12 | CLEAR = "clear"
|
---|
| 13 | }
|
---|
| 14 | export declare enum ReactiveFlags {
|
---|
| 15 | SKIP = "__v_skip",
|
---|
| 16 | IS_REACTIVE = "__v_isReactive",
|
---|
| 17 | IS_READONLY = "__v_isReadonly",
|
---|
| 18 | IS_SHALLOW = "__v_isShallow",
|
---|
| 19 | RAW = "__v_raw",
|
---|
| 20 | IS_REF = "__v_isRef"
|
---|
| 21 | }
|
---|
| 22 |
|
---|
| 23 | export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;
|
---|
| 24 | declare const ReactiveMarkerSymbol: unique symbol;
|
---|
| 25 | export interface ReactiveMarker {
|
---|
| 26 | [ReactiveMarkerSymbol]?: void;
|
---|
| 27 | }
|
---|
| 28 | export type Reactive<T> = UnwrapNestedRefs<T> & (T extends readonly any[] ? ReactiveMarker : {});
|
---|
| 29 | /**
|
---|
| 30 | * Returns a reactive proxy of the object.
|
---|
| 31 | *
|
---|
| 32 | * The reactive conversion is "deep": it affects all nested properties. A
|
---|
| 33 | * reactive object also deeply unwraps any properties that are refs while
|
---|
| 34 | * maintaining reactivity.
|
---|
| 35 | *
|
---|
| 36 | * @example
|
---|
| 37 | * ```js
|
---|
| 38 | * const obj = reactive({ count: 0 })
|
---|
| 39 | * ```
|
---|
| 40 | *
|
---|
| 41 | * @param target - The source object.
|
---|
| 42 | * @see {@link https://vuejs.org/api/reactivity-core.html#reactive}
|
---|
| 43 | */
|
---|
| 44 | export declare function reactive<T extends object>(target: T): Reactive<T>;
|
---|
| 45 | declare const ShallowReactiveMarker: unique symbol;
|
---|
| 46 | export type ShallowReactive<T> = T & {
|
---|
| 47 | [ShallowReactiveMarker]?: true;
|
---|
| 48 | };
|
---|
| 49 | /**
|
---|
| 50 | * Shallow version of {@link reactive()}.
|
---|
| 51 | *
|
---|
| 52 | * Unlike {@link reactive()}, there is no deep conversion: only root-level
|
---|
| 53 | * properties are reactive for a shallow reactive object. Property values are
|
---|
| 54 | * stored and exposed as-is - this also means properties with ref values will
|
---|
| 55 | * not be automatically unwrapped.
|
---|
| 56 | *
|
---|
| 57 | * @example
|
---|
| 58 | * ```js
|
---|
| 59 | * const state = shallowReactive({
|
---|
| 60 | * foo: 1,
|
---|
| 61 | * nested: {
|
---|
| 62 | * bar: 2
|
---|
| 63 | * }
|
---|
| 64 | * })
|
---|
| 65 | *
|
---|
| 66 | * // mutating state's own properties is reactive
|
---|
| 67 | * state.foo++
|
---|
| 68 | *
|
---|
| 69 | * // ...but does not convert nested objects
|
---|
| 70 | * isReactive(state.nested) // false
|
---|
| 71 | *
|
---|
| 72 | * // NOT reactive
|
---|
| 73 | * state.nested.bar++
|
---|
| 74 | * ```
|
---|
| 75 | *
|
---|
| 76 | * @param target - The source object.
|
---|
| 77 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreactive}
|
---|
| 78 | */
|
---|
| 79 | export declare function shallowReactive<T extends object>(target: T): ShallowReactive<T>;
|
---|
| 80 | type Primitive = string | number | boolean | bigint | symbol | undefined | null;
|
---|
| 81 | type Builtin = Primitive | Function | Date | Error | RegExp;
|
---|
| 82 | 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, unknown> ? Readonly<Ref<DeepReadonly<U>>> : T extends {} ? {
|
---|
| 83 | readonly [K in keyof T]: DeepReadonly<T[K]>;
|
---|
| 84 | } : Readonly<T>;
|
---|
| 85 | /**
|
---|
| 86 | * Takes an object (reactive or plain) or a ref and returns a readonly proxy to
|
---|
| 87 | * the original.
|
---|
| 88 | *
|
---|
| 89 | * A readonly proxy is deep: any nested property accessed will be readonly as
|
---|
| 90 | * well. It also has the same ref-unwrapping behavior as {@link reactive()},
|
---|
| 91 | * except the unwrapped values will also be made readonly.
|
---|
| 92 | *
|
---|
| 93 | * @example
|
---|
| 94 | * ```js
|
---|
| 95 | * const original = reactive({ count: 0 })
|
---|
| 96 | *
|
---|
| 97 | * const copy = readonly(original)
|
---|
| 98 | *
|
---|
| 99 | * watchEffect(() => {
|
---|
| 100 | * // works for reactivity tracking
|
---|
| 101 | * console.log(copy.count)
|
---|
| 102 | * })
|
---|
| 103 | *
|
---|
| 104 | * // mutating original will trigger watchers relying on the copy
|
---|
| 105 | * original.count++
|
---|
| 106 | *
|
---|
| 107 | * // mutating the copy will fail and result in a warning
|
---|
| 108 | * copy.count++ // warning!
|
---|
| 109 | * ```
|
---|
| 110 | *
|
---|
| 111 | * @param target - The source object.
|
---|
| 112 | * @see {@link https://vuejs.org/api/reactivity-core.html#readonly}
|
---|
| 113 | */
|
---|
| 114 | export declare function readonly<T extends object>(target: T): DeepReadonly<UnwrapNestedRefs<T>>;
|
---|
| 115 | /**
|
---|
| 116 | * Shallow version of {@link readonly()}.
|
---|
| 117 | *
|
---|
| 118 | * Unlike {@link readonly()}, there is no deep conversion: only root-level
|
---|
| 119 | * properties are made readonly. Property values are stored and exposed as-is -
|
---|
| 120 | * this also means properties with ref values will not be automatically
|
---|
| 121 | * unwrapped.
|
---|
| 122 | *
|
---|
| 123 | * @example
|
---|
| 124 | * ```js
|
---|
| 125 | * const state = shallowReadonly({
|
---|
| 126 | * foo: 1,
|
---|
| 127 | * nested: {
|
---|
| 128 | * bar: 2
|
---|
| 129 | * }
|
---|
| 130 | * })
|
---|
| 131 | *
|
---|
| 132 | * // mutating state's own properties will fail
|
---|
| 133 | * state.foo++
|
---|
| 134 | *
|
---|
| 135 | * // ...but works on nested objects
|
---|
| 136 | * isReadonly(state.nested) // false
|
---|
| 137 | *
|
---|
| 138 | * // works
|
---|
| 139 | * state.nested.bar++
|
---|
| 140 | * ```
|
---|
| 141 | *
|
---|
| 142 | * @param target - The source object.
|
---|
| 143 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreadonly}
|
---|
| 144 | */
|
---|
| 145 | export declare function shallowReadonly<T extends object>(target: T): Readonly<T>;
|
---|
| 146 | /**
|
---|
| 147 | * Checks if an object is a proxy created by {@link reactive()} or
|
---|
| 148 | * {@link shallowReactive()} (or {@link ref()} in some cases).
|
---|
| 149 | *
|
---|
| 150 | * @example
|
---|
| 151 | * ```js
|
---|
| 152 | * isReactive(reactive({})) // => true
|
---|
| 153 | * isReactive(readonly(reactive({}))) // => true
|
---|
| 154 | * isReactive(ref({}).value) // => true
|
---|
| 155 | * isReactive(readonly(ref({})).value) // => true
|
---|
| 156 | * isReactive(ref(true)) // => false
|
---|
| 157 | * isReactive(shallowRef({}).value) // => false
|
---|
| 158 | * isReactive(shallowReactive({})) // => true
|
---|
| 159 | * ```
|
---|
| 160 | *
|
---|
| 161 | * @param value - The value to check.
|
---|
| 162 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#isreactive}
|
---|
| 163 | */
|
---|
| 164 | export declare function isReactive(value: unknown): boolean;
|
---|
| 165 | /**
|
---|
| 166 | * Checks whether the passed value is a readonly object. The properties of a
|
---|
| 167 | * readonly object can change, but they can't be assigned directly via the
|
---|
| 168 | * passed object.
|
---|
| 169 | *
|
---|
| 170 | * The proxies created by {@link readonly()} and {@link shallowReadonly()} are
|
---|
| 171 | * both considered readonly, as is a computed ref without a set function.
|
---|
| 172 | *
|
---|
| 173 | * @param value - The value to check.
|
---|
| 174 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#isreadonly}
|
---|
| 175 | */
|
---|
| 176 | export declare function isReadonly(value: unknown): boolean;
|
---|
| 177 | export declare function isShallow(value: unknown): boolean;
|
---|
| 178 | /**
|
---|
| 179 | * Checks if an object is a proxy created by {@link reactive},
|
---|
| 180 | * {@link readonly}, {@link shallowReactive} or {@link shallowReadonly()}.
|
---|
| 181 | *
|
---|
| 182 | * @param value - The value to check.
|
---|
| 183 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#isproxy}
|
---|
| 184 | */
|
---|
| 185 | export declare function isProxy(value: any): boolean;
|
---|
| 186 | /**
|
---|
| 187 | * Returns the raw, original object of a Vue-created proxy.
|
---|
| 188 | *
|
---|
| 189 | * `toRaw()` can return the original object from proxies created by
|
---|
| 190 | * {@link reactive()}, {@link readonly()}, {@link shallowReactive()} or
|
---|
| 191 | * {@link shallowReadonly()}.
|
---|
| 192 | *
|
---|
| 193 | * This is an escape hatch that can be used to temporarily read without
|
---|
| 194 | * incurring proxy access / tracking overhead or write without triggering
|
---|
| 195 | * changes. It is **not** recommended to hold a persistent reference to the
|
---|
| 196 | * original object. Use with caution.
|
---|
| 197 | *
|
---|
| 198 | * @example
|
---|
| 199 | * ```js
|
---|
| 200 | * const foo = {}
|
---|
| 201 | * const reactiveFoo = reactive(foo)
|
---|
| 202 | *
|
---|
| 203 | * console.log(toRaw(reactiveFoo) === foo) // true
|
---|
| 204 | * ```
|
---|
| 205 | *
|
---|
| 206 | * @param observed - The object for which the "raw" value is requested.
|
---|
| 207 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#toraw}
|
---|
| 208 | */
|
---|
| 209 | export declare function toRaw<T>(observed: T): T;
|
---|
| 210 | export type Raw<T> = T & {
|
---|
| 211 | [RawSymbol]?: true;
|
---|
| 212 | };
|
---|
| 213 | /**
|
---|
| 214 | * Marks an object so that it will never be converted to a proxy. Returns the
|
---|
| 215 | * object itself.
|
---|
| 216 | *
|
---|
| 217 | * @example
|
---|
| 218 | * ```js
|
---|
| 219 | * const foo = markRaw({})
|
---|
| 220 | * console.log(isReactive(reactive(foo))) // false
|
---|
| 221 | *
|
---|
| 222 | * // also works when nested inside other reactive objects
|
---|
| 223 | * const bar = reactive({ foo })
|
---|
| 224 | * console.log(isReactive(bar.foo)) // false
|
---|
| 225 | * ```
|
---|
| 226 | *
|
---|
| 227 | * **Warning:** `markRaw()` together with the shallow APIs such as
|
---|
| 228 | * {@link shallowReactive()} allow you to selectively opt-out of the default
|
---|
| 229 | * deep reactive/readonly conversion and embed raw, non-proxied objects in your
|
---|
| 230 | * state graph.
|
---|
| 231 | *
|
---|
| 232 | * @param value - The object to be marked as "raw".
|
---|
| 233 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#markraw}
|
---|
| 234 | */
|
---|
| 235 | export declare function markRaw<T extends object>(value: T): Raw<T>;
|
---|
| 236 | /**
|
---|
| 237 | * Returns a reactive proxy of the given value (if possible).
|
---|
| 238 | *
|
---|
| 239 | * If the given value is not an object, the original value itself is returned.
|
---|
| 240 | *
|
---|
| 241 | * @param value - The value for which a reactive proxy shall be created.
|
---|
| 242 | */
|
---|
| 243 | export declare const toReactive: <T extends unknown>(value: T) => T;
|
---|
| 244 | /**
|
---|
| 245 | * Returns a readonly proxy of the given value (if possible).
|
---|
| 246 | *
|
---|
| 247 | * If the given value is not an object, the original value itself is returned.
|
---|
| 248 | *
|
---|
| 249 | * @param value - The value for which a readonly proxy shall be created.
|
---|
| 250 | */
|
---|
| 251 | export declare const toReadonly: <T extends unknown>(value: T) => DeepReadonly<T>;
|
---|
| 252 |
|
---|
| 253 | export type EffectScheduler = (...args: any[]) => any;
|
---|
| 254 | export type DebuggerEvent = {
|
---|
| 255 | effect: Subscriber;
|
---|
| 256 | } & DebuggerEventExtraInfo;
|
---|
| 257 | export type DebuggerEventExtraInfo = {
|
---|
| 258 | target: object;
|
---|
| 259 | type: TrackOpTypes | TriggerOpTypes;
|
---|
| 260 | key: any;
|
---|
| 261 | newValue?: any;
|
---|
| 262 | oldValue?: any;
|
---|
| 263 | oldTarget?: Map<any, any> | Set<any>;
|
---|
| 264 | };
|
---|
| 265 | export interface DebuggerOptions {
|
---|
| 266 | onTrack?: (event: DebuggerEvent) => void;
|
---|
| 267 | onTrigger?: (event: DebuggerEvent) => void;
|
---|
| 268 | }
|
---|
| 269 | export interface ReactiveEffectOptions extends DebuggerOptions {
|
---|
| 270 | scheduler?: EffectScheduler;
|
---|
| 271 | allowRecurse?: boolean;
|
---|
| 272 | onStop?: () => void;
|
---|
| 273 | }
|
---|
| 274 | export declare enum EffectFlags {
|
---|
| 275 | /**
|
---|
| 276 | * ReactiveEffect only
|
---|
| 277 | */
|
---|
| 278 | ACTIVE = 1,
|
---|
| 279 | RUNNING = 2,
|
---|
| 280 | TRACKING = 4,
|
---|
| 281 | NOTIFIED = 8,
|
---|
| 282 | DIRTY = 16,
|
---|
| 283 | ALLOW_RECURSE = 32,
|
---|
| 284 | PAUSED = 64
|
---|
| 285 | }
|
---|
| 286 | /**
|
---|
| 287 | * Subscriber is a type that tracks (or subscribes to) a list of deps.
|
---|
| 288 | */
|
---|
| 289 | interface Subscriber extends DebuggerOptions {
|
---|
| 290 | }
|
---|
| 291 | export declare class ReactiveEffect<T = any> implements Subscriber, ReactiveEffectOptions {
|
---|
| 292 | fn: () => T;
|
---|
| 293 | scheduler?: EffectScheduler;
|
---|
| 294 | onStop?: () => void;
|
---|
| 295 | onTrack?: (event: DebuggerEvent) => void;
|
---|
| 296 | onTrigger?: (event: DebuggerEvent) => void;
|
---|
| 297 | constructor(fn: () => T);
|
---|
| 298 | pause(): void;
|
---|
| 299 | resume(): void;
|
---|
| 300 | run(): T;
|
---|
| 301 | stop(): void;
|
---|
| 302 | trigger(): void;
|
---|
| 303 | get dirty(): boolean;
|
---|
| 304 | }
|
---|
| 305 | export interface ReactiveEffectRunner<T = any> {
|
---|
| 306 | (): T;
|
---|
| 307 | effect: ReactiveEffect;
|
---|
| 308 | }
|
---|
| 309 | export interface ReactiveEffectRunner<T = any> {
|
---|
| 310 | (): T;
|
---|
| 311 | effect: ReactiveEffect;
|
---|
| 312 | }
|
---|
| 313 | export declare function effect<T = any>(fn: () => T, options?: ReactiveEffectOptions): ReactiveEffectRunner<T>;
|
---|
| 314 | /**
|
---|
| 315 | * Stops the effect associated with the given runner.
|
---|
| 316 | *
|
---|
| 317 | * @param runner - Association with the effect to stop tracking.
|
---|
| 318 | */
|
---|
| 319 | export declare function stop(runner: ReactiveEffectRunner): void;
|
---|
| 320 | /**
|
---|
| 321 | * Temporarily pauses tracking.
|
---|
| 322 | */
|
---|
| 323 | export declare function pauseTracking(): void;
|
---|
| 324 | /**
|
---|
| 325 | * Re-enables effect tracking (if it was paused).
|
---|
| 326 | */
|
---|
| 327 | export declare function enableTracking(): void;
|
---|
| 328 | /**
|
---|
| 329 | * Resets the previous global effect tracking state.
|
---|
| 330 | */
|
---|
| 331 | export declare function resetTracking(): void;
|
---|
| 332 | /**
|
---|
| 333 | * Registers a cleanup function for the current active effect.
|
---|
| 334 | * The cleanup function is called right before the next effect run, or when the
|
---|
| 335 | * effect is stopped.
|
---|
| 336 | *
|
---|
| 337 | * Throws a warning if there is no current active effect. The warning can be
|
---|
| 338 | * suppressed by passing `true` to the second argument.
|
---|
| 339 | *
|
---|
| 340 | * @param fn - the cleanup function to be registered
|
---|
| 341 | * @param failSilently - if `true`, will not throw warning when called without
|
---|
| 342 | * an active effect.
|
---|
| 343 | */
|
---|
| 344 | export declare function onEffectCleanup(fn: () => void, failSilently?: boolean): void;
|
---|
| 345 |
|
---|
| 346 | declare const ComputedRefSymbol: unique symbol;
|
---|
| 347 | declare const WritableComputedRefSymbol: unique symbol;
|
---|
| 348 | interface BaseComputedRef<T, S = T> extends Ref<T, S> {
|
---|
| 349 | [ComputedRefSymbol]: true;
|
---|
| 350 | /**
|
---|
| 351 | * @deprecated computed no longer uses effect
|
---|
| 352 | */
|
---|
| 353 | effect: ComputedRefImpl;
|
---|
| 354 | }
|
---|
| 355 | export interface ComputedRef<T = any> extends BaseComputedRef<T> {
|
---|
| 356 | readonly value: T;
|
---|
| 357 | }
|
---|
| 358 | export interface WritableComputedRef<T, S = T> extends BaseComputedRef<T, S> {
|
---|
| 359 | [WritableComputedRefSymbol]: true;
|
---|
| 360 | }
|
---|
| 361 | export type ComputedGetter<T> = (oldValue?: T) => T;
|
---|
| 362 | export type ComputedSetter<T> = (newValue: T) => void;
|
---|
| 363 | export interface WritableComputedOptions<T, S = T> {
|
---|
| 364 | get: ComputedGetter<T>;
|
---|
| 365 | set: ComputedSetter<S>;
|
---|
| 366 | }
|
---|
| 367 | /**
|
---|
| 368 | * @private exported by @vue/reactivity for Vue core use, but not exported from
|
---|
| 369 | * the main vue package
|
---|
| 370 | */
|
---|
| 371 | export declare class ComputedRefImpl<T = any> implements Subscriber {
|
---|
| 372 | fn: ComputedGetter<T>;
|
---|
| 373 | private readonly setter;
|
---|
| 374 | effect: this;
|
---|
| 375 | onTrack?: (event: DebuggerEvent) => void;
|
---|
| 376 | onTrigger?: (event: DebuggerEvent) => void;
|
---|
| 377 | constructor(fn: ComputedGetter<T>, setter: ComputedSetter<T> | undefined, isSSR: boolean);
|
---|
| 378 | get value(): T;
|
---|
| 379 | set value(newValue: T);
|
---|
| 380 | }
|
---|
| 381 | /**
|
---|
| 382 | * Takes a getter function and returns a readonly reactive ref object for the
|
---|
| 383 | * returned value from the getter. It can also take an object with get and set
|
---|
| 384 | * functions to create a writable ref object.
|
---|
| 385 | *
|
---|
| 386 | * @example
|
---|
| 387 | * ```js
|
---|
| 388 | * // Creating a readonly computed ref:
|
---|
| 389 | * const count = ref(1)
|
---|
| 390 | * const plusOne = computed(() => count.value + 1)
|
---|
| 391 | *
|
---|
| 392 | * console.log(plusOne.value) // 2
|
---|
| 393 | * plusOne.value++ // error
|
---|
| 394 | * ```
|
---|
| 395 | *
|
---|
| 396 | * ```js
|
---|
| 397 | * // Creating a writable computed ref:
|
---|
| 398 | * const count = ref(1)
|
---|
| 399 | * const plusOne = computed({
|
---|
| 400 | * get: () => count.value + 1,
|
---|
| 401 | * set: (val) => {
|
---|
| 402 | * count.value = val - 1
|
---|
| 403 | * }
|
---|
| 404 | * })
|
---|
| 405 | *
|
---|
| 406 | * plusOne.value = 1
|
---|
| 407 | * console.log(count.value) // 0
|
---|
| 408 | * ```
|
---|
| 409 | *
|
---|
| 410 | * @param getter - Function that produces the next value.
|
---|
| 411 | * @param debugOptions - For debugging. See {@link https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging}.
|
---|
| 412 | * @see {@link https://vuejs.org/api/reactivity-core.html#computed}
|
---|
| 413 | */
|
---|
| 414 | export declare function computed<T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
|
---|
| 415 | export declare function computed<T, S = T>(options: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptions): WritableComputedRef<T, S>;
|
---|
| 416 |
|
---|
| 417 | declare const RefSymbol: unique symbol;
|
---|
| 418 | declare const RawSymbol: unique symbol;
|
---|
| 419 | export interface Ref<T = any, S = T> {
|
---|
| 420 | get value(): T;
|
---|
| 421 | set value(_: S);
|
---|
| 422 | /**
|
---|
| 423 | * Type differentiator only.
|
---|
| 424 | * We need this to be in public d.ts but don't want it to show up in IDE
|
---|
| 425 | * autocomplete, so we use a private Symbol instead.
|
---|
| 426 | */
|
---|
| 427 | [RefSymbol]: true;
|
---|
| 428 | }
|
---|
| 429 | /**
|
---|
| 430 | * Checks if a value is a ref object.
|
---|
| 431 | *
|
---|
| 432 | * @param r - The value to inspect.
|
---|
| 433 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#isref}
|
---|
| 434 | */
|
---|
| 435 | export declare function isRef<T>(r: Ref<T> | unknown): r is Ref<T>;
|
---|
| 436 | /**
|
---|
| 437 | * Takes an inner value and returns a reactive and mutable ref object, which
|
---|
| 438 | * has a single property `.value` that points to the inner value.
|
---|
| 439 | *
|
---|
| 440 | * @param value - The object to wrap in the ref.
|
---|
| 441 | * @see {@link https://vuejs.org/api/reactivity-core.html#ref}
|
---|
| 442 | */
|
---|
| 443 | export declare function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T>;
|
---|
| 444 | export declare function ref<T = any>(): Ref<T | undefined>;
|
---|
| 445 | declare const ShallowRefMarker: unique symbol;
|
---|
| 446 | export type ShallowRef<T = any, S = T> = Ref<T, S> & {
|
---|
| 447 | [ShallowRefMarker]?: true;
|
---|
| 448 | };
|
---|
| 449 | /**
|
---|
| 450 | * Shallow version of {@link ref()}.
|
---|
| 451 | *
|
---|
| 452 | * @example
|
---|
| 453 | * ```js
|
---|
| 454 | * const state = shallowRef({ count: 1 })
|
---|
| 455 | *
|
---|
| 456 | * // does NOT trigger change
|
---|
| 457 | * state.value.count = 2
|
---|
| 458 | *
|
---|
| 459 | * // does trigger change
|
---|
| 460 | * state.value = { count: 2 }
|
---|
| 461 | * ```
|
---|
| 462 | *
|
---|
| 463 | * @param value - The "inner value" for the shallow ref.
|
---|
| 464 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
|
---|
| 465 | */
|
---|
| 466 | export declare function shallowRef<T>(value: T): Ref extends T ? T extends Ref ? IfAny<T, ShallowRef<T>, T> : ShallowRef<T> : ShallowRef<T>;
|
---|
| 467 | export declare function shallowRef<T = any>(): ShallowRef<T | undefined>;
|
---|
| 468 | /**
|
---|
| 469 | * Force trigger effects that depends on a shallow ref. This is typically used
|
---|
| 470 | * after making deep mutations to the inner value of a shallow ref.
|
---|
| 471 | *
|
---|
| 472 | * @example
|
---|
| 473 | * ```js
|
---|
| 474 | * const shallow = shallowRef({
|
---|
| 475 | * greet: 'Hello, world'
|
---|
| 476 | * })
|
---|
| 477 | *
|
---|
| 478 | * // Logs "Hello, world" once for the first run-through
|
---|
| 479 | * watchEffect(() => {
|
---|
| 480 | * console.log(shallow.value.greet)
|
---|
| 481 | * })
|
---|
| 482 | *
|
---|
| 483 | * // This won't trigger the effect because the ref is shallow
|
---|
| 484 | * shallow.value.greet = 'Hello, universe'
|
---|
| 485 | *
|
---|
| 486 | * // Logs "Hello, universe"
|
---|
| 487 | * triggerRef(shallow)
|
---|
| 488 | * ```
|
---|
| 489 | *
|
---|
| 490 | * @param ref - The ref whose tied effects shall be executed.
|
---|
| 491 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#triggerref}
|
---|
| 492 | */
|
---|
| 493 | export declare function triggerRef(ref: Ref): void;
|
---|
| 494 | export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;
|
---|
| 495 | export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);
|
---|
| 496 | /**
|
---|
| 497 | * Returns the inner value if the argument is a ref, otherwise return the
|
---|
| 498 | * argument itself. This is a sugar function for
|
---|
| 499 | * `val = isRef(val) ? val.value : val`.
|
---|
| 500 | *
|
---|
| 501 | * @example
|
---|
| 502 | * ```js
|
---|
| 503 | * function useFoo(x: number | Ref<number>) {
|
---|
| 504 | * const unwrapped = unref(x)
|
---|
| 505 | * // unwrapped is guaranteed to be number now
|
---|
| 506 | * }
|
---|
| 507 | * ```
|
---|
| 508 | *
|
---|
| 509 | * @param ref - Ref or plain value to be converted into the plain value.
|
---|
| 510 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
|
---|
| 511 | */
|
---|
| 512 | export declare function unref<T>(ref: MaybeRef<T> | ComputedRef<T>): T;
|
---|
| 513 | /**
|
---|
| 514 | * Normalizes values / refs / getters to values.
|
---|
| 515 | * This is similar to {@link unref()}, except that it also normalizes getters.
|
---|
| 516 | * If the argument is a getter, it will be invoked and its return value will
|
---|
| 517 | * be returned.
|
---|
| 518 | *
|
---|
| 519 | * @example
|
---|
| 520 | * ```js
|
---|
| 521 | * toValue(1) // 1
|
---|
| 522 | * toValue(ref(1)) // 1
|
---|
| 523 | * toValue(() => 1) // 1
|
---|
| 524 | * ```
|
---|
| 525 | *
|
---|
| 526 | * @param source - A getter, an existing ref, or a non-function value.
|
---|
| 527 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
|
---|
| 528 | */
|
---|
| 529 | export declare function toValue<T>(source: MaybeRefOrGetter<T>): T;
|
---|
| 530 | /**
|
---|
| 531 | * Returns a proxy for the given object that shallowly unwraps properties that
|
---|
| 532 | * are refs. If the object already is reactive, it's returned as-is. If not, a
|
---|
| 533 | * new reactive proxy is created.
|
---|
| 534 | *
|
---|
| 535 | * @param objectWithRefs - Either an already-reactive object or a simple object
|
---|
| 536 | * that contains refs.
|
---|
| 537 | */
|
---|
| 538 | export declare function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;
|
---|
| 539 | export type CustomRefFactory<T> = (track: () => void, trigger: () => void) => {
|
---|
| 540 | get: () => T;
|
---|
| 541 | set: (value: T) => void;
|
---|
| 542 | };
|
---|
| 543 | /**
|
---|
| 544 | * Creates a customized ref with explicit control over its dependency tracking
|
---|
| 545 | * and updates triggering.
|
---|
| 546 | *
|
---|
| 547 | * @param factory - The function that receives the `track` and `trigger` callbacks.
|
---|
| 548 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#customref}
|
---|
| 549 | */
|
---|
| 550 | export declare function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;
|
---|
| 551 | export type ToRefs<T = any> = {
|
---|
| 552 | [K in keyof T]: ToRef<T[K]>;
|
---|
| 553 | };
|
---|
| 554 | /**
|
---|
| 555 | * Converts a reactive object to a plain object where each property of the
|
---|
| 556 | * resulting object is a ref pointing to the corresponding property of the
|
---|
| 557 | * original object. Each individual ref is created using {@link toRef()}.
|
---|
| 558 | *
|
---|
| 559 | * @param object - Reactive object to be made into an object of linked refs.
|
---|
| 560 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#torefs}
|
---|
| 561 | */
|
---|
| 562 | export declare function toRefs<T extends object>(object: T): ToRefs<T>;
|
---|
| 563 | export type ToRef<T> = IfAny<T, Ref<T>, [T] extends [Ref] ? T : Ref<T>>;
|
---|
| 564 | /**
|
---|
| 565 | * Used to normalize values / refs / getters into refs.
|
---|
| 566 | *
|
---|
| 567 | * @example
|
---|
| 568 | * ```js
|
---|
| 569 | * // returns existing refs as-is
|
---|
| 570 | * toRef(existingRef)
|
---|
| 571 | *
|
---|
| 572 | * // creates a ref that calls the getter on .value access
|
---|
| 573 | * toRef(() => props.foo)
|
---|
| 574 | *
|
---|
| 575 | * // creates normal refs from non-function values
|
---|
| 576 | * // equivalent to ref(1)
|
---|
| 577 | * toRef(1)
|
---|
| 578 | * ```
|
---|
| 579 | *
|
---|
| 580 | * Can also be used to create a ref for a property on a source reactive object.
|
---|
| 581 | * The created ref is synced with its source property: mutating the source
|
---|
| 582 | * property will update the ref, and vice-versa.
|
---|
| 583 | *
|
---|
| 584 | * @example
|
---|
| 585 | * ```js
|
---|
| 586 | * const state = reactive({
|
---|
| 587 | * foo: 1,
|
---|
| 588 | * bar: 2
|
---|
| 589 | * })
|
---|
| 590 | *
|
---|
| 591 | * const fooRef = toRef(state, 'foo')
|
---|
| 592 | *
|
---|
| 593 | * // mutating the ref updates the original
|
---|
| 594 | * fooRef.value++
|
---|
| 595 | * console.log(state.foo) // 2
|
---|
| 596 | *
|
---|
| 597 | * // mutating the original also updates the ref
|
---|
| 598 | * state.foo++
|
---|
| 599 | * console.log(fooRef.value) // 3
|
---|
| 600 | * ```
|
---|
| 601 | *
|
---|
| 602 | * @param source - A getter, an existing ref, a non-function value, or a
|
---|
| 603 | * reactive object to create a property ref from.
|
---|
| 604 | * @param [key] - (optional) Name of the property in the reactive object.
|
---|
| 605 | * @see {@link https://vuejs.org/api/reactivity-utilities.html#toref}
|
---|
| 606 | */
|
---|
| 607 | export declare function toRef<T>(value: T): T extends () => infer R ? Readonly<Ref<R>> : T extends Ref ? T : Ref<UnwrapRef<T>>;
|
---|
| 608 | export declare function toRef<T extends object, K extends keyof T>(object: T, key: K): ToRef<T[K]>;
|
---|
| 609 | export declare function toRef<T extends object, K extends keyof T>(object: T, key: K, defaultValue: T[K]): ToRef<Exclude<T[K], undefined>>;
|
---|
| 610 | /**
|
---|
| 611 | * This is a special exported interface for other packages to declare
|
---|
| 612 | * additional types that should bail out for ref unwrapping. For example
|
---|
| 613 | * \@vue/runtime-dom can declare it like so in its d.ts:
|
---|
| 614 | *
|
---|
| 615 | * ``` ts
|
---|
| 616 | * declare module '@vue/reactivity' {
|
---|
| 617 | * export interface RefUnwrapBailTypes {
|
---|
| 618 | * runtimeDOMBailTypes: Node | Window
|
---|
| 619 | * }
|
---|
| 620 | * }
|
---|
| 621 | * ```
|
---|
| 622 | */
|
---|
| 623 | export interface RefUnwrapBailTypes {
|
---|
| 624 | }
|
---|
| 625 | export type ShallowUnwrapRef<T> = {
|
---|
| 626 | [K in keyof T]: DistributeRef<T[K]>;
|
---|
| 627 | };
|
---|
| 628 | type DistributeRef<T> = T extends Ref<infer V, unknown> ? V : T;
|
---|
| 629 | export type UnwrapRef<T> = T extends ShallowRef<infer V, unknown> ? V : T extends Ref<infer V, unknown> ? UnwrapRefSimple<V> : UnwrapRefSimple<T>;
|
---|
| 630 | type UnwrapRefSimple<T> = T extends Builtin | Ref | RefUnwrapBailTypes[keyof RefUnwrapBailTypes] | {
|
---|
| 631 | [RawSymbol]?: true;
|
---|
| 632 | } ? T : T extends Map<infer K, infer V> ? Map<K, UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof Map<any, any>>> : T extends WeakMap<infer K, infer V> ? WeakMap<K, UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof WeakMap<any, any>>> : T extends Set<infer V> ? Set<UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof Set<any>>> : T extends WeakSet<infer V> ? WeakSet<UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof WeakSet<any>>> : T extends ReadonlyArray<any> ? {
|
---|
| 633 | [K in keyof T]: UnwrapRefSimple<T[K]>;
|
---|
| 634 | } : T extends object & {
|
---|
| 635 | [ShallowReactiveMarker]?: never;
|
---|
| 636 | } ? {
|
---|
| 637 | [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>;
|
---|
| 638 | } : T;
|
---|
| 639 |
|
---|
| 640 | export declare const ITERATE_KEY: unique symbol;
|
---|
| 641 | export declare const MAP_KEY_ITERATE_KEY: unique symbol;
|
---|
| 642 | export declare const ARRAY_ITERATE_KEY: unique symbol;
|
---|
| 643 | /**
|
---|
| 644 | * Tracks access to a reactive property.
|
---|
| 645 | *
|
---|
| 646 | * This will check which effect is running at the moment and record it as dep
|
---|
| 647 | * which records all effects that depend on the reactive property.
|
---|
| 648 | *
|
---|
| 649 | * @param target - Object holding the reactive property.
|
---|
| 650 | * @param type - Defines the type of access to the reactive property.
|
---|
| 651 | * @param key - Identifier of the reactive property to track.
|
---|
| 652 | */
|
---|
| 653 | export declare function track(target: object, type: TrackOpTypes, key: unknown): void;
|
---|
| 654 | /**
|
---|
| 655 | * Finds all deps associated with the target (or a specific property) and
|
---|
| 656 | * triggers the effects stored within.
|
---|
| 657 | *
|
---|
| 658 | * @param target - The reactive object.
|
---|
| 659 | * @param type - Defines the type of the operation that needs to trigger effects.
|
---|
| 660 | * @param key - Can be used to target a specific reactive property in the target object.
|
---|
| 661 | */
|
---|
| 662 | export declare function trigger(target: object, type: TriggerOpTypes, key?: unknown, newValue?: unknown, oldValue?: unknown, oldTarget?: Map<unknown, unknown> | Set<unknown>): void;
|
---|
| 663 |
|
---|
| 664 | export declare class EffectScope {
|
---|
| 665 | detached: boolean;
|
---|
| 666 | private _isPaused;
|
---|
| 667 | constructor(detached?: boolean);
|
---|
| 668 | get active(): boolean;
|
---|
| 669 | pause(): void;
|
---|
| 670 | /**
|
---|
| 671 | * Resumes the effect scope, including all child scopes and effects.
|
---|
| 672 | */
|
---|
| 673 | resume(): void;
|
---|
| 674 | run<T>(fn: () => T): T | undefined;
|
---|
| 675 | stop(fromParent?: boolean): void;
|
---|
| 676 | }
|
---|
| 677 | /**
|
---|
| 678 | * Creates an effect scope object which can capture the reactive effects (i.e.
|
---|
| 679 | * computed and watchers) created within it so that these effects can be
|
---|
| 680 | * disposed together. For detailed use cases of this API, please consult its
|
---|
| 681 | * corresponding {@link https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md | RFC}.
|
---|
| 682 | *
|
---|
| 683 | * @param detached - Can be used to create a "detached" effect scope.
|
---|
| 684 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope}
|
---|
| 685 | */
|
---|
| 686 | export declare function effectScope(detached?: boolean): EffectScope;
|
---|
| 687 | /**
|
---|
| 688 | * Returns the current active effect scope if there is one.
|
---|
| 689 | *
|
---|
| 690 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#getcurrentscope}
|
---|
| 691 | */
|
---|
| 692 | export declare function getCurrentScope(): EffectScope | undefined;
|
---|
| 693 | /**
|
---|
| 694 | * Registers a dispose callback on the current active effect scope. The
|
---|
| 695 | * callback will be invoked when the associated effect scope is stopped.
|
---|
| 696 | *
|
---|
| 697 | * @param fn - The callback function to attach to the scope's cleanup.
|
---|
| 698 | * @see {@link https://vuejs.org/api/reactivity-advanced.html#onscopedispose}
|
---|
| 699 | */
|
---|
| 700 | export declare function onScopeDispose(fn: () => void, failSilently?: boolean): void;
|
---|
| 701 |
|
---|
| 702 | /**
|
---|
| 703 | * Track array iteration and return:
|
---|
| 704 | * - if input is reactive: a cloned raw array with reactive values
|
---|
| 705 | * - if input is non-reactive or shallowReactive: the original raw array
|
---|
| 706 | */
|
---|
| 707 | export declare function reactiveReadArray<T>(array: T[]): T[];
|
---|
| 708 | /**
|
---|
| 709 | * Track array iteration and return raw array
|
---|
| 710 | */
|
---|
| 711 | export declare function shallowReadArray<T>(arr: T[]): T[];
|
---|
| 712 |
|
---|
| 713 | export declare enum WatchErrorCodes {
|
---|
| 714 | WATCH_GETTER = 2,
|
---|
| 715 | WATCH_CALLBACK = 3,
|
---|
| 716 | WATCH_CLEANUP = 4
|
---|
| 717 | }
|
---|
| 718 | export type WatchEffect = (onCleanup: OnCleanup) => void;
|
---|
| 719 | export type WatchSource<T = any> = Ref<T, any> | ComputedRef<T> | (() => T);
|
---|
| 720 | export type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onCleanup: OnCleanup) => any;
|
---|
| 721 | export type OnCleanup = (cleanupFn: () => void) => void;
|
---|
| 722 | export interface WatchOptions<Immediate = boolean> extends DebuggerOptions {
|
---|
| 723 | immediate?: Immediate;
|
---|
| 724 | deep?: boolean | number;
|
---|
| 725 | once?: boolean;
|
---|
| 726 | scheduler?: WatchScheduler;
|
---|
| 727 | onWarn?: (msg: string, ...args: any[]) => void;
|
---|
| 728 | }
|
---|
| 729 | export type WatchStopHandle = () => void;
|
---|
| 730 | export interface WatchHandle extends WatchStopHandle {
|
---|
| 731 | pause: () => void;
|
---|
| 732 | resume: () => void;
|
---|
| 733 | stop: () => void;
|
---|
| 734 | }
|
---|
| 735 | export type WatchScheduler = (job: () => void, isFirstRun: boolean) => void;
|
---|
| 736 | /**
|
---|
| 737 | * Returns the current active effect if there is one.
|
---|
| 738 | */
|
---|
| 739 | export declare function getCurrentWatcher(): ReactiveEffect<any> | undefined;
|
---|
| 740 | /**
|
---|
| 741 | * Registers a cleanup callback on the current active effect. This
|
---|
| 742 | * registered cleanup callback will be invoked right before the
|
---|
| 743 | * associated effect re-runs.
|
---|
| 744 | *
|
---|
| 745 | * @param cleanupFn - The callback function to attach to the effect's cleanup.
|
---|
| 746 | * @param failSilently - if `true`, will not throw warning when called without
|
---|
| 747 | * an active effect.
|
---|
| 748 | * @param owner - The effect that this cleanup function should be attached to.
|
---|
| 749 | * By default, the current active effect.
|
---|
| 750 | */
|
---|
| 751 | export declare function onWatcherCleanup(cleanupFn: () => void, failSilently?: boolean, owner?: ReactiveEffect | undefined): void;
|
---|
| 752 | export declare function watch(source: WatchSource | WatchSource[] | WatchEffect | object, cb?: WatchCallback | null, options?: WatchOptions): WatchHandle;
|
---|
| 753 | export declare function traverse(value: unknown, depth?: number, seen?: Set<unknown>): unknown;
|
---|
| 754 |
|
---|