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.