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 weled 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 puted value or something)

If I can change the props value directly in the ponent, I no longer need to emit the changes to parent ponent 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 bees reactive?

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 weled 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 puted value or something)

If I can change the props value directly in the ponent, I no longer need to emit the changes to parent ponent 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 bees reactive?

• javascript
• vue.js
• vuejs3
• vue-position-api

• I don't see how it can be anything other than an antipattern. You're still affecting the parent without the parent knowing about it. props are meant to be read-only, and converting them to refs might lead to unintended mutations etc. – Jay Edwards Commented Sep 11, 2024 at 13:39

2 Answers 2

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 puted from a prop needs to be passed as an argument:

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

someFunction(user);

Where a function makes use of position 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);
}

props should not be assigned toRef (with some limited exceptions:)

(both from vuejs, see link below)

In the VueJS toRef docs it explicitly states:

When toRef is used with ponent 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 puted with get and set instead. See the guide to using v-model with ponents for more information.

so, in answer to your questions:

Only the parent should be able to modify the variables supplied to its child's props. a prop is a getter in the child, nothing more. if you make it reactive in the child, you could cause side effects in the parent without the parent knowing about it. This is why we explicitly use event emissions to make it clear to the parent what is going on and when