I've noticed a common practice in the CompositionAPI where props are converted to refs using `toRefs` function. This has left me feeling a bit confused.
For instance, citing the Vue 3 official guide:
export default {
props: {
user: {
type: String,
required: true
}
},
setup(props) {
const { user } = toRefs(props)
//... utilize the value of user
}
}
I have two questions based on different scenarios:
If the props.user is already reactive,
and its value changes if modified in any ancestor component, then why do we need to use `toRefs`? Isn't it inherently reactive?On the other hand, if it's not reactive and just a basic string value,
does converting it to a ref imply that we intend to alter its value? I understand that making an object reactive allows for its values to be changed. However, most guides and linters advise against modifying prop values directly (such as altering computed properties).
If I can directly modify the value of a prop within the component, then there might be no need to emit changes to the parent component continuously. This approach may seem convenient, but it raises questions about the appropriateness of modifying prop values once they become reactive.