Question

196

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

rated 0 times [ 199] [ 3] / answers: 1 / hits: 5514 / 3 Years ago, fri, october 1, 2021, 12:00:00

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:

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?

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leog

Add To Favorites

Follow

Total Points: 225

Total Questions: 113

Total Answers: 118

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

leog questions

1 Material-UI pickers trigger validation on blur not on change?

Sun, Sep 13, 20, 00:00, 4 Years ago

1 What's the difference between onClick ={ () => function()} and onClick = {function()}?

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Detect an Electron instance via JavaScript

Mon, May 11, 20, 00:00, 4 Years ago

1 changing theme with react native elements not working?

Sat, Apr 18, 20, 00:00, 4 Years ago

1 JS import module and run on page load

Sun, Apr 5, 20, 00:00, 4 Years ago

View All

answered 3 Years ago devlin · Accepted Answer

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);

}