1---
2title: KeepAlive with Transition Memory Leak
3impact: MEDIUM
4impactDescription: Combining KeepAlive with Transition can cause memory leaks in certain Vue versions
5type: gotcha
6tags: [vue3, keepalive, transition, memory-leak, animation]
7---
8 
9# KeepAlive with Transition Memory Leak
10 
11**Impact: MEDIUM** - There is a known memory leak when using `<Transition>` and `<KeepAlive>` together. Component instances may not be properly freed from memory when combining these features.
12 
13## Task Checklist
14 
15- [ ] Test memory behavior when using KeepAlive + Transition together
16- [ ] Consider if transition animation is necessary with cached components
17- [ ] Use browser DevTools Memory tab to verify no leak
18- [ ] Keep Vue updated to get latest bug fixes
19 
20## The Problem
21 
22```vue
23<template>
24  <!-- Known memory leak combination in some Vue versions -->
25  <Transition name="fade">
26    <KeepAlive>
27      <component :is="currentView" />
28    </KeepAlive>
29  </Transition>
30</template>
31```
32 
33When switching between components repeatedly:
34- Component instances accumulate in memory
35- References prevent garbage collection
36- Memory usage grows with each switch
37 
38## Diagnosis
39 
40Use Chrome DevTools to detect the leak:
41 
421. Open DevTools > Memory tab
432. Take heap snapshot
443. Switch between components 10+ times
454. Take another heap snapshot
465. Compare: look for growing VueComponent count
47 
48## Workarounds
49 
50### Option 1: Remove Transition if Not Essential
51 
52```vue
53<template>
54  <!-- No memory leak without Transition -->
55  <KeepAlive :max="5">
56    <component :is="currentView" />
57  </KeepAlive>
58</template>
59```
60 
61### Option 2: Use CSS Animations Instead
62 
63```vue
64<template>
65  <KeepAlive :max="5">
66    <component
67      :is="currentView"
68      :class="{ 'fade-enter': isTransitioning }"
69    />
70  </KeepAlive>
71</template>
72 
73<style>
74.fade-enter {
75  animation: fadeIn 0.3s ease-in;
76}
77 
78@keyframes fadeIn {
79  from { opacity: 0; }
80  to { opacity: 1; }
81}
82</style>
83```
84 
85### Option 3: Use Strict Cache Limits
86 
87If you must use both, minimize impact with strict limits:
88 
89```vue
90<template>
91  <Transition name="fade" mode="out-in">
92    <KeepAlive :max="3">
93      <component :is="currentView" />
94    </KeepAlive>
95  </Transition>
96</template>
97```
98 
99### Option 4: Key-Based Cache Invalidation
100 
101Force fresh instances when needed:
102 
103```vue
104<script setup>
105import { ref, computed } from 'vue'
106 
107const currentView = ref('Dashboard')
108const cacheKey = ref(0)
109 
110function switchViewFresh(view) {
111  currentView.value = view
112  cacheKey.value++ // Force new instance
113}
114</script>
115 
116<template>
117  <Transition name="fade" mode="out-in">
118    <KeepAlive :max="3">
119      <component :is="currentView" :key="cacheKey" />
120    </KeepAlive>
121  </Transition>
122</template>
123```
124 
125## Keep Vue Updated
126 
127This is a known issue tracked in Vue's GitHub repository. Memory leak fixes are periodically released, so ensure you're on the latest Vue version:
128 
129```bash
130npm update vue
131```
132 
133## Key Points
134 
1351. **Known issue** - Memory leaks with KeepAlive + Transition are documented
1362. **Test in DevTools** - Use Memory tab to verify your specific usage
1373. **Consider alternatives** - CSS animations may work without the leak
1384. **Set strict `max`** - Limit cache size to cap memory impact
1395. **Keep Vue updated** - Bug fixes are released periodically
140 
141## Reference
142- [GitHub Issue #9842: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9842)
143- [GitHub Issue #9840: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9840)
144- [Vue.js KeepAlive Documentation](https://vuejs.org/guide/built-ins/keep-alive.html)
145