`<KeepAlive>`
Explore how to use Vue's KeepAlive component to cache component instances, preserving their state and improving performance. Understand how to use include, exclude, and max props to control caching behavior, and learn about the activated and deactivated lifecycle hooks for managing component reuse effectively.
We'll cover the following...
Every time a component is rendered or mounted, Vue creates a new instance of this component. In most cases, we want this behavior—there’s no need to cache titles, static text, or entire pages of static content. Doing so would mean that Vue stores them in memory, even though they’re not in use.
Sometimes though, cached components are helpful. They keep their state and need minimal setup time to be remounted by Vue. We can cache components by using <keep-alive>.
What does <keep-alive> do?
Vue tends to remove any unused components from memory by default. The more that is happening on a page, the more components Vue needs to render. To keep performance optimal, Vue tries to keep the memory footprint minimal. The main drawback is that a switch between components through, for example, routing, requires the component to be completely setup all over again. This setup results in slightly longer rendering times.
We can work around this mechanism by using <keep-alive>, which caches the component instance internally. When the component becomes necessary again, its VNode is remounted where it was located. It’s removed from the cache of <keep-alive> and marked as being kept alive again, restoring the original state before the unmount.
The internal cache is updated if a component does not count as being kept alive anymore (using include and exclude), so Vue is optimizing its memory usage even in this case. How <keep-alive> works is by using a default slot. We can add as many components as possible.
Let’s investigate the caching behavior regarding a component’s state. The SPA below has a component switcher implemented with two different components. Keep them alive using <keep-alive> and implement a state with a <textarea> or something similar.
<template>
<p>
Second component
</p>
</template>
<script>
export default {
name: 'Second',
}
</script>
If you’re unsure about how to approach this, have a look at the hint below:
Try setting v-if on the <keep-alive> tags, keeping all components alive with a single component or separately. How does the caching behave? Does Vue keep the state in every case?
include, exclude, and max
Imagine a list of 20 components that should all be kept alive, except for one. Or imagine a list of entities rendered as a list of variable components, some of which we need to cache and others that Vue shouldn’t cache. A similar case would be a list of hundreds of items, the first ten of which we need to cache.
Such cases can add a lot of complexity if we use <keep-alive> only. A list of 20 components can be kept alive with a single instance of <keep-alive>. If a single one of these components should not require being kept alive, we’d need 19 instances to cover the single case of one not requiring it. Variable components themselves give us much flexibility, which is defeated if we need to add v-if to keep them alive.
Vue’s developers recognized these cases and added three different props to <keep-alive>:
include: This is an allowlist for components. Vue will ignore all components that are not in this list.exclude: This is a blocklist for components. Vue will ignore all the components in this list.max: This is the maximum number of components cached.
To work, include and exclude need the name option of the specified components to be set explicitly since Vue matches the name to the attribute. Both include and exclude use patterns for the matching. We can either use regular expressions, strings, or an array of strings.
Let’s practice these props too. The SPA below has the same two components as the above SPA. Use <keep-alive> to explicitly cache a component or exclude it from being cached. Experiment with patterns and lists of components to test out max.
<template>
<p>
Second component
</p>
</template>
In the hint below is a sample approach:
Lifecycle hooks
The <keep-alive> component offers some extra lifecycle hooks we can use to attach and detach listeners, intervals, and timeouts. They replace some of the other hooks but essentially function the same. These hooks are called activated and deactivated.