Skip to content

Commit 52913a8

Browse files
committed
Update API entry for toRef to mention mutating props
1 parent ddda91c commit 52913a8

File tree

1 file changed

+6
-2
lines changed

1 file changed

+6
-2
lines changed

src/api/reactivity-utilities.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,14 @@ Can be used to create a ref for a property on a source reactive object. The crea
8080
const fooRef = ref(state.foo)
8181
```
8282

83-
The above ref is **not** synced with `state.foo`, because the `ref()` receives a plain string value.
83+
The above ref is **not** synced with `state.foo`, because the `ref()` receives a plain number value.
8484

8585
`toRef()` is useful when you want to pass the ref of a prop to a composable function:
8686

8787
```vue
8888
<script setup>
89+
import { toRef } from 'vue'
90+
8991
const props = defineProps(/* ... */)
9092

9193
// convert `props.foo` into a ref, then pass into
@@ -94,7 +96,9 @@ Can be used to create a ref for a property on a source reactive object. The crea
9496
</script>
9597
```
9698
97-
`toRef()` will return a usable ref even if the source property doesn't currently exist. This makes it especially useful when working with optional props, which wouldn't be picked up by [`toRefs`](#torefs).
99+
When `toRef` is used with component props, the usual restrictions around mutating the props still apply. Attempting to assign a new value to the ref is equivalent to trying to modify the prop directly and is not allowed. In that scenario you may want to consider using [`computed`](./reactivity-core.html#computed) with `get` and `set` instead. See the guide to [using `v-model` with components](/guide/components/events.html#usage-with-v-model) for more information.
100+
101+
`toRef()` will return a usable ref even if the source property doesn't currently exist. This makes it possible to work with optional properties, which wouldn't be picked up by [`toRefs`](#torefs).
98102
99103
## toRefs()
100104

0 commit comments

Comments
 (0)