Back
VueMediumNew

What is `KeepAlive` and what problem does it solve?

Caching inactive component instances

Ideal Answer

<KeepAlive> is a built-in component that caches inactive component instances instead of destroying them, preserving their state and avoiding re-render costs when they're toggled back into view (e.g., switching tabs, dynamic components).

JavaScript
<KeepAlive>
  <component :is="activeTab" />
</KeepAlive>

Cached components receive onActivated/onDeactivated lifecycle hooks instead of being unmounted/remounted. You can control what gets cached with include/exclude props, and limit cache size with max.