Mastering keep-alive in Vue: Optimize Your Component Performance

Imagine a dashboard where users apply filters, search for specific items, scroll through long lists, create custom views, and enter data into forms. Naturally, you want all of these interactions - the selections, inputs, and scroll positions - to be preserved exactly as the user left them, even if they navigate away and return later.

But how do you achieve this kind of seamless experience without rewriting large parts of your component or overhauling your app's structure?

The answer is simple: <keep-alive>.

What is <keep-alive>

<keep-alive> is a built-in Vue component that allows you to cache other components so that they don't get destroyed and recreated every time they're toggled or navigated away from.

Instead of reloading a component from scratch, Vue will keep it alive in memory, preserving its state, data, scroll position, and DOM structure.

When you wrap a dynamic component or <router-view> in <keep-alive>, Vue:

Mounts the component only once.
Keeps it in memory when it is no longer visible.
Restores it instantly the next time it's needed.

When to Use <keep-alive>

- You're toggling between multiple views or tabs.
- A component is expensive to re-render.
- You want to keep user input or internal state when the view is hidden.

Basic Usage


<template>
  <keep-alive>
    <component :is="viewComponent" />
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      viewComponent: 'HomeView'
    }
  }
}
</script>
Using with Vue Router
<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-else />
</template>
In router setup:

{
  path: '/dashboard',
  component: DashboardView,
  meta: { keepAlive: true }
}

include and exclude

Vue’s <keep-alive> lets you selectively cache components using the include and exclude props. These props control which components get kept alive and which ones don't.

The include prop tells Vue: Only cache these specific components.


<keep-alive :include="HomeView,SettingsView">
  <component :is="viewComponent" />
</keep-alive>

The exclude prop tells Vue: Cache everything except these components.


<keep-alive :exclude="HomeView,SettingsView">
  <component :is="viewComponent" />
</keep-alive>

max

The max prop in Vue’s <keep-alive> component controls how many components Vue should keep in memory at once.

Think of it like a cache size limit—Vue will only store the specified number of components, and it will evict the least recently used component when the limit is exceeded.


<keep-alive :max="4">
  <component :is="viewComponent" />
</keep-alive>

In this example:

Only 4 components will be kept alive.

When the 5th is added, Vue will destroy the least recently used one.

Lifecycle Hooks

Special hooks for cached components:
activated() - called when the component is re-activated.
deactivated() - called when the component is hidden but kept in memory.

Example:


export default {
  activated() {
    console.log('Activated');
  },
  deactivated() {
    console.log('Deactivated');
  }
}

What to Avoid

- Don’t cache components that must fetch fresh data every time and if you must cache them then make sure you are using the activated hook to pull data everytime the component is in use.
- Avoid excessive memory usage by caching too many components.
- Be careful when using it with large or complex dynamic views.

Final Thoughts

<keep-alive> is a simple yet powerful way to make your Vue applications more performant. Use it wisely to keep your components alive when necessary, preserve state, and deliver a better user experience without complex hacks.

Happy Caching!

About Author

Mayank Patel