1---
2category: Reactivity
3alias: resolveRef
4---
5 
6# toRef
7 
8Normalize value/ref/getter to `ref` or `computed`.
9 
10## Usage
11 
12```ts
13import { toRef } from '@vueuse/core'
14 
15const foo = ref('hi')
16 
17const a = toRef(0) // Ref<number>
18const b = toRef(foo) // Ref<string>
19const c = toRef(() => 'hi') // ComputedRef<string>
20```
21 
22## Differences from Vue's `toRef`
23 
24VueUse's `toRef` is not the same as Vue’s `toRef` from the `vue` package.
25 
26### VueUse `toRef`
27 
28- Accepts **value**, **ref**, or **getter**
29- Returns:
30  - a **ref** for primitive values
31  - a **ref** for existing refs
32  - a **computed** for getter functions
33- Does **not** accept `object + key`
34- Getters always produce readonly computed values
35 
36### Vue `toRef`
37 
38- Accepts only:
39  - a **reactive object + property key**, or
40  - an existing **ref**
41- Produces a **writable ref** linked to the underlying reactive object
42- Does **not** accept primitive values
43- Does **not** accept getter functions
44 
45### Summary
46 
47| Behavior                 | VueUse `toRef`            | Vue `toRef`             |
48| ------------------------ | ------------------------- | ----------------------- |
49| Accepts primitive values | ✔️                        | ❌                      |
50| Accepts getter           | ✔️ (computed)             | ❌                      |
51| Accepts existing ref     | ✔️                        | ✔️                      |
52| Accepts object + key     | ❌                        | ✔️                      |
53| Writable                 | ✔️ (except getter)        | ✔️                      |
54| Purpose                  | Normalize to ref/computed | Bind to reactive object |
55 
56## Type Declarations
57 
58```ts
59/**
60 * Normalize value/ref/getter to `ref` or `computed`.
61 */
62export declare function toRef<T>(r: () => T): Readonly<Ref<T>>
63export declare function toRef<T>(r: ComputedRef<T>): ComputedRef<T>
64export declare function toRef<T>(r: MaybeRefOrGetter<T>): Ref<T>
65export declare function toRef<T>(r: T): Ref<T>
66export declare function toRef<T extends object, K extends keyof T>(
67  object: T,
68  key: K,
69): ToRef<T[K]>
70export declare function toRef<T extends object, K extends keyof T>(
71  object: T,
72  key: K,
73  defaultValue: T[K],
74): ToRef<Exclude<T[K], undefined>>
75```
76