fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.2 KiB
2.2 KiB
category, alias
| category | alias |
|---|---|
| Reactivity | resolveRef |
toRef
Normalize value/ref/getter to ref or computed.
Usage
import { toRef } from '@vueuse/core';
const foo = ref('hi');
const a = toRef(0); // Ref<number>
const b = toRef(foo); // Ref<string>
const c = toRef(() => 'hi'); // ComputedRef<string>
Differences from Vue's toRef
VueUse's toRef is not the same as Vue’s toRef from the vue package.
VueUse toRef
- Accepts value, ref, or getter
- Returns:
- a ref for primitive values
- a ref for existing refs
- a computed for getter functions
- Does not accept
object + key - Getters always produce readonly computed values
Vue toRef
- Accepts only:
- a reactive object + property key, or
- an existing ref
- Produces a writable ref linked to the underlying reactive object
- Does not accept primitive values
- Does not accept getter functions
Summary
| Behavior | VueUse toRef |
Vue toRef |
|---|---|---|
| Accepts primitive values | ✔️ | ❌ |
| Accepts getter | ✔️ (computed) | ❌ |
| Accepts existing ref | ✔️ | ✔️ |
| Accepts object + key | ❌ | ✔️ |
| Writable | ✔️ (except getter) | ✔️ |
| Purpose | Normalize to ref/computed | Bind to reactive object |
Type Declarations
/**
* Normalize value/ref/getter to `ref` or `computed`.
*/
export declare function toRef<T>(r: () => T): Readonly<Ref<T>>;
export declare function toRef<T>(r: ComputedRef<T>): ComputedRef<T>;
export declare function toRef<T>(r: MaybeRefOrGetter<T>): Ref<T>;
export declare function toRef<T>(r: T): Ref<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>>;