Best Way to Re-render Vue 3 Components: Master Guide

When we change the values of reactive variables in our Vue 3 components, they will update the DOM automatically. But sometimes you might want to re-render the entire Vue 3 component to keep your application up-to-date and responsive to user actions.

While re-rendering a component, it's important to use re-rendering techniques appropriately to ensure optimal performance.

In this master guide, we'll explore the best ways to reload our Vue 3 components. You can re-render a child component from the parent or you can do it from itself.

You will see 2 techniques for re-rendering your components. These are:

• Re-render components using the v-if directive (Not recommended).
• Re-render components by changing key values.

Even though using the "key changing technique" is better for this purpose, we'll discuss both methods so that you can understand the difference and why it is better than another.

To ensure that Vue re-renders a component, it is recommended to specify a key attribute on the component. Just change the value of the key attribute, whenever the component needs to be re-rendered.

This will signal Vue to treat the component as a new instance, thereby triggering a re-render of the component. Vue will be able to track the identity of the component instance with this key and update it accordingly.

Also Read: Style Child Components & Dynamic HTML Using Vue 3 Deep Selector

Re-render Vue 3 Child Components with v-if Directive

You can reload your Vue 3 components using the conditional rendering technique. For that, we have a v-if directive.

If you pass a truthy value to this directive, it will render the component on the page. Otherwise, it will remove the component.

          // Parent.vue

<template>
    <Child v-if="isRendered" />

    <button @click="updateComponent">Re-render</button>
</template>

<script setup>
import Child from './Child.vue'
import { nextTick, ref } from 'vue'

const isRendered = ref(true)

const updateComponent = async () => {
    isRendered.value = false

    await nextTick()

    isRendered.value = true
}
</script>
        

Here the Child component is being rendered within the Parent.vue component using a v-if directive, which conditionally renders the child component based on the boolean value of the isRendered property.

Whenever you need to refresh this child component, you will click the button and it will change the value of isRendered ref inside the updateComponent function.

In this function, I am setting the value of isRendered to false, which will remove the child component from the page. Then you have to set its value to true only after updating the DOM.

You can wait for the DOM to update by calling the nextTick() function provided by Vue. I am using await keyword because this function returns a promise.

When this child component is removed from the DOM completely, it will again set the value of isRendered to true. Therefore, Vue will render this component again.

Why shouldn't you use this technique to re-render your components?

Even though this technique works but there is an obvious problem. As you can see, every time you click the button, DOM will update twice.

It will update when the child component gets removed and when it gets added to the DOM. That's why it's not optimal for performance.

Let's see a better solution to solve this issue.

Also Read: Synchronous VS Asynchronous Programming with Examples

Force Vue 3 to Re-render Child Components by Changing Key Value

You can add the key attribute to your component to re-render it just by changing the key value. Whenever the key value changes, it will send a signal to Vue that this component has been updated.

Therefore, Vue will re-render this component as new from scratch and removes the old instance.

          // Parent.vue

<template>
    <Child :key="renderKey" />

    <button @click="updateComponent">Re-render</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const renderKey = ref(0)

const updateComponent = () => {
    renderKey.value = renderKey.value + 1
}
</script>
        

Here, I have a renderKey property created using the ref function. Its initial value is 0. I am using the :key attribute with the Child component and set renderKey as the value of this attribute.

Whenever I click the button, it increments the renderKey value. As the key value has changed, Vue will consider the Child component as a new instance.

As a result, Vue will re-render the Child component with the updated renderKey value. This is called the "Key changing technique".

How to Re-render a Vue 3 Component From Itself

So far we have re-rendered a child component by clicking a button from a parent. But sometimes you might want to reload a component from within itself.

You can also do it by passing data from a child to the parent component and following the key-changing technique to re-render your Vue 3 component.

The Parent.vue Component:

          // Parent.vue

<template>
    <Child :self-reload="updateComponent" :key="renderKey" />
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const renderKey = ref(0)

const updateComponent = () => {
    renderKey.value += 1
}
</script>
        

Like the previous example, I am setting the :key attribute with the renderKey value to my Child component. I am also passing the updateComponent function to this component as a prop.

This function will increment the renderKey value which will re-render the Child component. But this time we will execute this function inside the Child component.

The Child.vue Component:

          // Child.vue

<template>
    <div>
        <h2>Child component</h2>

        <button @click="selfReload">Reload Me</button>
    </div>
</template>

<script setup>
const props = defineProps<{ selfReload: () => void }>()
</script>
        

Inside my Child component, I am getting the updateComponent function as the selfReload prop. I also have a button that executes this function whenever it gets clicked.

That's how you can call the updateComponent function from your child component. It will change the key value. As a result, Vue will re-render the Child component.

Also Read: Improve Performance in Vue 3 Using Lazy Loading and Dynamic Import

Conclusion

There are several ways to trigger a re-render, including using the key attribute and the v-if directive. You have seen both of these methods in this post. But it is better to use the key attribute for this purpose.

Using the key attribute can be a great option when you want to force Vue to treat a component as a new instance and re-render it from scratch. You can trigger a re-render without having to recreate the entire component tree with this method.

On the other hand, you can also use the v-if directive for refreshing your components. However, this approach can be less performant than using the key attribute, especially when dealing with deeply nested components.

By using the right technique to force Vue 3 to re-render components, you can ensure that your application remains fast, responsive, and scalable.