76 lines
2.2 KiB
Markdown
76 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
category: Reactivity
|
|||
|
|
alias: resolveRef
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# toRef
|
|||
|
|
|
|||
|
|
Normalize value/ref/getter to `ref` or `computed`.
|
|||
|
|
|
|||
|
|
## Usage
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
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
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
/**
|
|||
|
|
* 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>>
|
|||
|
|
```
|