reactivity.d.ts 23 KB

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