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

admin管理员组

文章数量:1341417

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

Share Improve this question Follow edited Oct 1, 2021 at 17:47 Estus Flask 224k7979 gold badges472472 silver badges611611 bronze badges asked Oct 1, 2021 at 16:23 kevinluo201kevinluo201 1,66322 gold badges1515 silver badges2121 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

本文标签： javascriptWhy using toRef(props) and is it good idea to change their value in CompositionAPIStack Overflow