Why using toRef(props) and is it good idea to change their value in CompositionAPI?

Question

I've seen a pattern of using props in of CompositionAPI very often, that is use toRefs to make all entries of props ref. I'm kind of confused by it.

For exmaple, from the Vue 3 official guide:

export default {
  props: {
    user: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const { user } = toRefs(props)

    //... use user's value
  }
}

I have 2 questions in 2 scenearios:

1. when the props.user is already reactive
   Its value will change if it's changed in any ancestors, so why we need to use toRefs? Doesn't it already reactive?

2. if it's not reactive, it's just a primitive string value
   Does making it reactive means we're going to change its value? I think making a object reactive also imply that its value is welcomed to be changed. But all the guides and linters warn us that we'd better not to change the props value.(for not writing to the computed value or something)

If I can change the props value directly in the component, I no longer need to emit the changes to parent component everytime. It's very convenient but I don't know whenther it is a good idea to change the props value after we're sure it becomes reactive?

Answer 1

Since props aren't supposed to be mutated, this is useful for a specific case that is explained in the documentation; a ref that is computed from a prop needs to be passed as an argument:

const { user } = toRefs(props)
// or
// const user = computed(() => props.user)

someFunction(user);

Where a function makes use of composition API or just needs an argument to be passed by reference rather than by value due to the way it works, e.g.:

function someFunction(val) {
  setTimeout(() => {
    console.log('Up-to-date value:', unref(val));
  }, 1000);
}