KeepAlive

In a Vue.js application, the way components are rendered and re-rendered can significantly impact the application's performance and user experience. Vue provides a special built-in component called KeepAlive that can be used to control this rendering behavior. In this topic, you will learn about this built-in Vue component, and see how it's used.

What is the keep-alive component

The KeepAlive component in Vue is used to preserve the state of a component, and avoid re-rendering it when it's re-visited. This can be particularly useful in situations where re-rendering a component can be computationally expensive or where you want to maintain the state of a component when a user navigates away and then returns to it. Let's check out how it's used in the next section.

Using keep-alive with dynamic components

KeepAlive can be used with dynamic components in Vue to preserve their state. Here's the syntax:

<KeepAlive>
  <component :is="currentComponent"></component>
</KeepAlive>

Here, currentComponent is a dynamic component. The KeepAlive component will cache the state of currentComponent, so if you switch to another component and then switch back, the state of currentComponent will be preserved, and it won't have to be re-rendered.

Let's see this in more detail: Imagine we have two components: ComponentA and ComponentB. They are counter components so, with a button click they increase their counts.

Now, in a parent component, we'll switch between ComponentA and ComponentB:

<template>
  <div>
    <button type="button" @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent" />
  </div>
</template>

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

const currentComponent = ref('ComponentA')
const toggleComponent = () => {
 currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
</script>

In this version, if you increase the counter in ComponentA or ComponentB, navigate to the other component, and then navigate back, you'll see that the counter has reset to 0. This is because the component is re-rendered each time it's visited.

To remedy this, let's modify this example to use KeepAlive. We just need to wrap our dynamic component in a KeepAlive tag:

<template>
  <div>
    <button type="button" @click="toggleComponent">Toggle Component</button>
    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

Now, if you increase the counter in ComponentA or ComponentB, navigate to the other component, and then navigate back, you'll see that the counter has preserved its value. This is because the KeepAlivecomponent caches the inactive component, preserving its state and avoiding re-rendering.

Understanding include and exclude

You can control which components should be kept alive using the include and exclude props of KeepAlive. Both props can take a string (a comma-delimited list), a regex pattern, or an array of strings. So, if you want to specify which component to cache or not, you can use these props.

<!-- comma-delimited string -->
<KeepAlive include="a,b">
  <component :is="current" />
</KeepAlive>

<!-- regex (use `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="current" />
</KeepAlive>

<!-- Array (use `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="current" />
</KeepAlive>

Conclusion

The KeepAlive component in Vue offers a built-in tool for managing the rendering behavior and performance of your Vue application. By understanding how to use it with dynamic components and how to control which components are kept alive using the include and exclude props, you can build more efficient and user-friendly Vue applications.