javascript / intermediate
Snippet
Preserving Reactivity with toRefs
Destructuring the props object in Vue 3 breaks reactivity. toRefs converts each property of a reactive object into a ref that maintains a connection to the source, ensuring updates are still tracked.
snippet.js
javascript
1
2
const props = defineProps(['user']);const { user } = toRefs(props);
vue
Breakdown
1
const props = defineProps(['user']);
Define component props as a reactive object.
2
const { user } = toRefs(props);
Convert the property into a standalone ref so it can be destructured safely.