1---
2title: KeepAlive Component Best Practices
3impact: HIGH
4impactDescription: KeepAlive caches component instances; misuse causes stale data, memory growth, or unexpected lifecycle behavior
5type: best-practice
6tags: [vue3, keepalive, cache, performance, router, dynamic-components]
7---
8 
9# KeepAlive Component Best Practices
10 
11**Impact: HIGH** - `<KeepAlive>` caches component instances instead of destroying them. Use it to preserve state across switches, but manage cache size and freshness explicitly to avoid memory growth or stale UI.
12 
13## Task List
14 
15- Use KeepAlive only where state preservation improves UX
16- Set a reasonable `max` to cap cache size
17- Declare component names for include/exclude matching
18- Use `onActivated`/`onDeactivated` for cache-aware logic
19- Decide how and when cached views refresh their data
20- Avoid caching memory-heavy or security-sensitive views
21 
22## When to Use KeepAlive
23 
24Use KeepAlive when switching between views where state should persist (tabs, multi-step forms, dashboards). Avoid it when each visit should start fresh.
25 
26**BAD:**
27```vue
28<template>
29  <!-- State resets on every switch -->
30  <component :is="currentTab" />
31</template>
32```
33 
34**GOOD:**
35```vue
36<template>
37  <!-- State preserved between switches -->
38  <KeepAlive>
39    <component :is="currentTab" />
40  </KeepAlive>
41</template>
42```
43 
44## When NOT to Use KeepAlive
45 
46- Search or filter pages where users expect fresh results
47- Memory-heavy components (maps, large tables, media players)
48- Sensitive flows where data must be cleared on exit
49- Components with heavy background activity you cannot pause
50 
51## Limit and Control the Cache
52 
53Always cap cache size with `max` and restrict caching to specific components when possible.
54 
55```vue
56<template>
57  <KeepAlive :max="5" include="Dashboard,Settings">
58    <component :is="currentView" />
59  </KeepAlive>
60</template>
61```
62 
63## Ensure Component Names Match include/exclude
64 
65`include` and `exclude` match the component `name` option. Explicitly set names for reliable caching.
66 
67```vue
68<!-- TabA.vue -->
69<script setup>
70defineOptions({ name: 'TabA' })
71</script>
72```
73 
74```vue
75<template>
76  <KeepAlive include="TabA,TabB">
77    <component :is="currentTab" />
78  </KeepAlive>
79</template>
80```
81 
82## Cache Invalidation Strategies
83 
84Vue 3 has no direct API to remove a specific cached instance. Use keys or dynamic include/exclude to force refreshes.
85 
86```vue
87<script setup>
88import { ref, reactive } from 'vue'
89 
90const currentView = ref('Dashboard')
91const viewKeys = reactive({ Dashboard: 0, Settings: 0 })
92 
93function invalidateCache(view) {
94  viewKeys[view]++
95}
96</script>
97 
98<template>
99  <KeepAlive>
100    <component :is="currentView" :key="`${currentView}-${viewKeys[currentView]}`" />
101  </KeepAlive>
102</template>
103```
104 
105## Lifecycle Hooks for Cached Components
106 
107Cached components are not destroyed on switch. Use activation hooks for refresh and cleanup.
108 
109```vue
110<script setup>
111import { onActivated, onDeactivated } from 'vue'
112 
113onActivated(() => {
114  refreshData()
115})
116 
117onDeactivated(() => {
118  pauseTimers()
119})
120</script>
121```
122 
123## Router Caching and Freshness
124 
125Decide whether navigation should show cached state or a fresh view. A common pattern is to key by route when params change.
126 
127```vue
128<template>
129  <router-view v-slot="{ Component, route }">
130    <KeepAlive>
131      <component :is="Component" :key="route.fullPath" />
132    </KeepAlive>
133  </router-view>
134</template>
135```
136 
137If you want cache reuse but fresh data, refresh in `onActivated` and compare query/params before fetching.
138