How To Destructure Props In Vue 3 Without Losing Reactivity

If you have been working with Vue 3, you will know that if you destructure props, you will lose reactivity which can be a problem and lead to unexpected issues in your application. Not that long ago, I wrote an article about this which you can read here.

In Vue 3, passing data between components is done through props. When a component receives props, you can destructure them to access the individual pieces of data. However, if you’re not careful, destructuring props can cause the reactivity system in Vue to break as mentioned. In this article, we’ll explore why this happens and how to destructure props in a way that will preserve reactivity.

Why Destructuring Props Can Break Reactivity

Vue’s reactivity system is based on proxies and relies on the fact that it can track which properties of an object are accessed and when they are changed. When a component receives an object as a prop, Vue sets up a reactive getter and setter for each property of that object. This allows Vue to detect when a property is changed and update the component accordingly.

However, when you destructure an object prop, what you are doing is in its essence creating a new object that is no longer reactive. This is because the reactive getters and setters that Vue created for the original object do not transfer over to the new object. As a result, changes made to the destructured object will not trigger reactivity updates. If you are not aware of this as a developer, you will most likely experience unintended bugs and side effects in your application.

How To Destructure Props Without Breaking Reactivity

To destructure props in Vue 3 without losing reactivity, you can use the toRefs function. toRefs takes an object and returns a new object where each property is a ref. A ref is a reactive object that contains a single value.

Let’s take a look at an example of how this is done!

<template>
  <div>
    <p>{{ firstName }}</p>
    <p>{{ lastName }}</p>
  </div>
</template>

<script>
import { toRefs } from 'vue';

export default {
  props: {
    person: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const { firstName, lastName } = toRefs(props.person);
    return { firstName, lastName };
  },
};
</script>

In the above example, we’re using the toRefs function to destructure the person prop into firstName and lastName refs. By returning these refs from the setup function, we're able to use them in our template without losing reactivity.

This means that if the person prop is changed from the outside on this component, it will propagate correctly into this component and will render the changes to the person.

For example, if the person prop is updated in the parent component, the new values for firstName and lastName will be automatically updated in the child component without any additional setup or configuration needed. This is because toRefs creates reactive refs that are still connected to the original object prop, so any changes made to the original object will be reflected in the reactive refs.

Overall, using toRefs to destructure props in Vue 3 is a great way to preserve reactivity and ensure that your components stay in sync with changes made to their props from the outside.

What about performance?

Using toRefs to destructure props in Vue 3 does come with a slight performance cost, but it's generally acceptable in most cases.

When you destructure an object prop using toRefs, Vue needs to create a new ref for each property of the object. This means that more reactive objects need to be created, which can increase memory usage and slightly slow down the reactivity system.

However, the performance impact of using toRefs is usually minimal, especially when compared to the benefits of preserving reactivity when destructuring props. In fact, the toRefs function is built into Vue 3 specifically to help address the reactivity issues that can arise from destructuring props, so it's a recommended approach for many use cases.

That being said, it’s always a good idea to keep an eye on the performance of your Vue components, especially if they’re rendering large amounts of data or dealing with complex logic. If you notice any significant slowdowns or memory issues, you may want to consider alternative approaches or optimizations. But in most cases, using toRefs to destructure props should not cause any significant performance problems.

Destructuring props in Vue 3 can be a convenient way to access individual pieces of data. However, if you’re not careful, it can cause the reactivity system to break. By using the toRefs function, you can destructure props without losing reactivity. This allows you to write more concise and readable code without sacrificing performance or functionality.

Thanks for reading and I hope you liked the article, if so, please help support me by hitting that clap button.

If you’d like to catch up with me sometime, follow me on Twitter | LinkedIn or simply visit my website.

P.S.: First, you should get my posts in your inbox. Do that here!

Secondly, if you like to experience Medium yourself, consider supporting me and thousands of other writers by signing up for a membership. It only costs $5 per month, it supports us, writers, greatly, and you have the chance to make money with your writing as well. In the past month, I’ve made over $150. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times.