toRefs()
Converts a reactive object into a plain object of synced refs.
Syntax
toRefs<T extends object>(object: T): ToRefs<T>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
object | object | No | The reactive object to expand into refs. |
Returns
ToRefs<T> — An object whose values are refs linked to the source.
Examples
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
function useMouse() {
const pos = reactive({ x: 0, y: 0 });
return toRefs(pos);
}
const { x, y } = useMouse(); // stays reactive after destructuring
</script>
<template><p>{{ x }}, {{ y }}</p></template>
Notes
Use toRefs to return reactive state from a composable so callers can
destructure without losing reactivity. Each resulting ref is two-way bound to
the source property. It only includes properties present at call time.