midVue.js
Describe the 'toRef' and 'toRefs' utilities.
Updated May 4, 2026
Short answer
These utilities convert reactive object properties into individual refs while maintaining the reactive link.
Deep explanation
toRef creates a ref for a specific property on a source reactive object. toRefs converts an entire reactive object into a plain object where each property is a ref. This is crucial when destructuring reactive objects or passing specific properties to composables without losing reactivity.
Real-world example
Returning reactive state from a 'useFeature' composable so the consumer can destructure it cleanly.
Common mistakes
- Destructuring a reactive object directly (e.g., `const { x } = state`), which breaks the reactive connection.
Follow-up questions
- What is the difference between toRef and ref(state.prop)?