Vue 28: keep-alive
easy⏱ 5 mincoursevue
Caching instead of destroying
<keep-alive><component :is="current" /></keep-alive> keeps every visited component instance alive in memory instead of tearing it down when it's switched away from. When you switch back, Vue reuses the cached instance instead of creating a new one — its data, refs, and DOM state are exactly as you left them.
<keep-alive>
<component :is="currentTab" />
</keep-alive>
The contrast that proves it
The clearest way to SEE keep-alive working is a side-by-side comparison: two identical switchers, same child components, one wrapped in <keep-alive> and one not. Increment a counter in both, switch away and back — only the kept-alive one still shows your count.
Prove state survives
Build CounterA and CounterB, each with local count state. Render two switchers: one wraps <component :is="keptTab" /> in <keep-alive>, the other renders <component :is="freshTab" /> bare. Click +1 in each, switch panels, switch back, and observe the difference.