Keep-alive for caching components in Vue - Step-by-Step Execution

Concept Flow - Keep-alive for caching components

Component A Rendered

↓

Switch to Component B

↓

Component A Cached

↓

Component B Rendered

↓

Switch back to Component A

↓

Component A Restored from Cache

↓

Component B Cached

When switching components inside <keep-alive>, Vue caches inactive components instead of destroying them, so switching back restores their state instantly.

Execution Sample

Vue

<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

<script setup>
import { ref } from 'vue'
const currentComponent = ref('CompA')
</script>

This code switches between components inside <keep-alive>, caching inactive ones to preserve their state.

Execution Table

Step	Action	Current Component	Cache State	Rendered Output
1	Initial render	CompA	Cache empty	CompA content shown
2	Switch to CompB	CompB	CompA cached	CompB content shown
3	Switch back to CompA	CompA	CompB cached	CompA restored from cache
4	Switch to CompB again	CompB	CompA cached	CompB restored from cache
5	End of demo	CompB	CompA cached	CompB content shown

💡 Demo ends after switching components and caching states.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
currentComponent	CompA	CompA	CompB	CompA	CompB	CompB
cache	empty	empty	CompA cached	CompB cached	CompA cached	CompA cached

Key Moments - 2 Insights

Why does switching back to CompA show its previous state instead of resetting?

Because <keep-alive> caches CompA when switching away (see Step 2), so when switching back (Step 3), Vue restores it from cache instead of recreating.

What happens to the component not currently shown?

It is kept in cache by <keep-alive> (see Cache State column), so it is not destroyed but stored for quick restoration.

Visual Quiz - 3 Questions

Look at the execution table at Step 2. What is the cache state after switching to CompB?

A Cache empty

B CompB cached

C CompA cached

D Both CompA and CompB cached

💡 Hint

Check the 'Cache State' column at Step 2 in the execution table.

At which step does CompA get restored from cache?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Rendered Output' column for when CompA is restored.

If <keep-alive> was removed, what would happen when switching components?

A Components would still cache their state

B Components would be destroyed and recreated each switch

C Only the first component would render

D Vue would throw an error

💡 Hint

Think about what does as shown in the concept flow and execution table.

Concept Snapshot

<keep-alive> wraps dynamic components to cache inactive ones.
Switching components inside it preserves their state.
Cached components are not destroyed but hidden.
Restoring a cached component is instant.
Useful for tabs, wizards, or expensive components.

Full Transcript

This visual trace shows how Vue's <keep-alive> caches components. Initially, CompA renders and cache is empty. When switching to CompB, CompA is cached and CompB renders. Switching back restores CompA from cache instantly. The cache always holds the inactive component. This avoids destroying and recreating components, preserving their state and improving performance. Removing <keep-alive> would cause components to be destroyed on switch. This is useful for UI patterns like tabs where you want to keep user input or scroll position.

Practice

1. What is the main purpose of the <keep-alive> component in Vue?

easy

A. To cache components and preserve their state when switching views

B. To permanently remove components from the DOM

C. To reload components every time they are displayed

D. To style components with CSS automatically

Solution

1. Step 1: Understand what <keep-alive> does

   The <keep-alive> component caches inactive components instead of destroying them.

2. Step 2: Identify the effect on component state

   Because components are cached, their state (like user input or scroll position) is preserved when switching back.

3. Final Answer:

   To cache components and preserve their state when switching views -> Option A

4. Quick Check:

   Keep-alive caches components [OK]

Hint: Remember: keep-alive means keep the component's state alive [OK]

Common Mistakes:

• Thinking keep-alive reloads components every time
• Confusing keep-alive with styling or layout features
• Assuming keep-alive removes components permanently

2. Which of the following is the correct syntax to use keep-alive with a dynamic component named MyComponent?

easy

A. <keep-alive><component :is="MyComponent" /></keep-alive>

B. <keep-alive :is="MyComponent" />

C. <component :is="MyComponent" keep-alive />

D. <keep-alive><MyComponent /></keep-alive>

Solution

1. Step 1: Recall how to wrap dynamic components with keep-alive

   The <keep-alive> component wraps around a dynamic component using <component :is="..." />.

2. Step 2: Check each option's syntax

   <keep-alive><component :is="MyComponent" /></keep-alive> correctly wraps <component :is="MyComponent" /> inside <keep-alive>. Options A and C misuse attributes or tags. <keep-alive><MyComponent /></keep-alive> tries to wrap a component tag directly, which is invalid for dynamic components.

3. Final Answer:

   <keep-alive><component :is="MyComponent" /></keep-alive> -> Option A

4. Quick Check:

   Wrap dynamic component inside keep-alive [OK]

Hint: Wrap inside tags [OK]

Common Mistakes:

• Trying to add keep-alive as a prop to component
• Using component tags directly without :is for dynamic components
• Placing :is on keep-alive instead of component

3. Given this Vue template:

<keep-alive>
  <component :is="currentView" />
</keep-alive>

and currentView switches between 'ViewA' and 'ViewB'. What happens to the state of 'ViewA' when switching to 'ViewB' and back?

medium

A. The state of 'ViewA' is reset to initial values

B. 'ViewA' state is preserved because it is cached

C. An error occurs because keep-alive cannot cache dynamic components

D. 'ViewA' is destroyed and recreated fresh

Solution

1. Step 1: Understand keep-alive behavior with dynamic components

   When wrapped in <keep-alive>, inactive components are cached, not destroyed.

2. Step 2: Apply this to switching views

   Switching from 'ViewA' to 'ViewB' caches 'ViewA'. Returning to 'ViewA' restores its previous state.

3. Final Answer:

   'ViewA' state is preserved because it is cached -> Option B

4. Quick Check:

   Keep-alive caches dynamic components [OK]

Hint: Switching views inside keep-alive preserves previous state [OK]

Common Mistakes:

• Assuming components reset on every switch
• Thinking keep-alive destroys inactive components
• Believing keep-alive causes runtime errors with dynamic components

4. What is wrong with this code snippet?

<keep-alive>
  <MyComponent :is="currentView" />
</keep-alive>

Assuming currentView is a string with component name.

medium

A. keep-alive cannot wrap components

B. Missing closing tag for keep-alive

C. currentView should be a component object, not a string

D. Using :is on a component tag instead of <component>

Solution

1. Step 1: Identify correct usage of dynamic components

   Dynamic components require the <component :is="..." /> syntax, not <MyComponent :is="..." />.

2. Step 2: Check the code snippet

   The snippet incorrectly uses :is on a named component tag, which is invalid and causes errors.

3. Final Answer:

   Using :is on a component tag instead of <component> -> Option D

4. Quick Check:

   Dynamic components need <component :is> syntax [OK]

Hint: Use for dynamic components, not named tags [OK]

Common Mistakes:

• Placing :is on a named component tag
• Forgetting to close keep-alive tags
• Thinking keep-alive cannot wrap components

5. You want to cache only the 'UserProfile' component but not 'UserSettings' when switching views. Which is the correct way to use <keep-alive> with the include prop to achieve this?

hard

A. <keep-alive include={UserProfile}><component :is="currentView" /></keep-alive>

B. <keep-alive exclude="UserProfile"><component :is="currentView" /></keep-alive>

C. <keep-alive include="UserProfile"><component :is="currentView" /></keep-alive>

D. <keep-alive include="UserSettings"><component :is="currentView" /></keep-alive>

Solution

1. Step 1: Understand the include prop on keep-alive

   The include prop accepts a string or array of component names to cache only those components.

2. Step 2: Apply include to cache 'UserProfile' only

   Setting include="UserProfile" caches only the 'UserProfile' component and excludes others like 'UserSettings'.

3. Final Answer:

   <keep-alive include="UserProfile"><component :is="currentView" /></keep-alive> -> Option C

4. Quick Check:

   Use include="UserProfile" to cache only that component [OK]

Hint: Use include prop with component name to cache selectively [OK]

Common Mistakes:

• Using exclude instead of include to cache desired component
• Passing include as an object instead of string
• Including wrong component name in include prop