<KeepAlive> Cache Component Instances
Last updated: 2026-10-22
<KeepAlive> Cache Component Instances
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<KeepAlive include="TabA,TabB" :max="10">
<component :is="currentTab"></component>
</KeepAlive>⚙️ Arguments
| props | include, exclude (names or regex) and max (LRU eviction) |
|---|
▶ Example
Edit the code below and see the live result:
Output：
Type in tab A, switch away and back — the text remains.💡 Key Points
💡 Tip Pair with activated/deactivated for refresh-on-entry and pause-on-exit.
ℹ️ Note max evicts the least recently used instance.
⚠️ Warning Instances and their timers stay alive — bound the cache with max.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from v-show?
A v-show hides the DOM; KeepAlive preserves the whole instance.
Q How to use include?
A Comma-separated names or regex against the component name.
Q Does the cache persist forever?
A Without max it grows; constrain it or use include/exclude.
