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.