toRef()
Creates a ref that stays in sync with a source property or getter.
Syntax
toRef(source, key?, defaultValue?) | toRef(getter)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
source | object | function | No | Reactive object, or a getter for a normalized ref. |
key | string | No | Property name on the source object to link. |
Returns
Ref<T> — A ref bound to the source property.
Examples
<script setup lang="ts">
import { reactive, toRef } from 'vue';
const state = reactive({ count: 0 });
const countRef = toRef(state, 'count');
countRef.value++; // updates state.count too
console.log(state.count); // 1
</script>
Notes
toRef preserves the reactive connection to a single property, unlike
destructuring a reactive object. The getter form `toRef(() => x.y)` creates a
read-only normalized ref, handy for props. Use toRefs() to convert every
property at once.