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

Concept Flow - Keep-alive for expensive components

Component mounts first time

↓

Component renders and runs setup

↓

Component cached by <keep-alive>

↓

User navigates away

↓

Component is hidden but state kept

↓

User navigates back

↓

Component restored from cache, no re-setup

↓

Component continues with preserved state

This flow shows how Vue's <keep-alive> caches a component after first render, preserving its state when hidden and restoring it without re-running setup.

Execution Sample

Vue

<template>
  <keep-alive>
    <ExpensiveComponent v-if="show" />
  </keep-alive>
  <button @click="show = !show">Toggle</button>
</template>

<script setup>
import { ref } from 'vue'
import ExpensiveComponent from './ExpensiveComponent.vue'
const show = ref(true)
</script>

This Vue code toggles an expensive component inside <keep-alive>, caching it to avoid re-setup on toggle.

Execution Table

Step	Action	Component State	Cache Status	Rendered Output
1	Initial render, show=true	ExpensiveComponent setup runs	Cache empty	ExpensiveComponent visible
2	User clicks toggle, show=false	ExpensiveComponent hidden but alive	Component cached	No component visible
3	User clicks toggle, show=true	ExpensiveComponent restored from cache	Component cached	ExpensiveComponent visible with preserved state
4	User clicks toggle, show=false again	Component hidden, state preserved	Component cached	No component visible
5	User clicks toggle, show=true again	Component restored, no setup rerun	Component cached	ExpensiveComponent visible with same state
6	User navigates away, component unmounted	Component destroyed	Cache cleared if <keep-alive> removed	No component visible

💡 Execution stops when component is unmounted or <keep-alive> removed, clearing cache.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
show	true	true	false	true	false	true	false
ExpensiveComponent state	none	initialized	preserved (hidden)	restored	preserved (hidden)	restored	destroyed
Cache	empty	stores component	stores component	stores component	stores component	stores component	cleared

Key Moments - 3 Insights

Why doesn't ExpensiveComponent run setup again when toggled back on?

Because <keep-alive> caches the component after first mount (see Step 3 in execution_table), so it restores the component from cache without rerunning setup.

What happens to the component state when it is hidden by v-if inside <keep-alive>?

The component is hidden but kept alive and its state is preserved in cache (see Step 2 and Step 4), so when shown again, it resumes with the same state.

When is the cached component destroyed and removed from memory?

When the component is unmounted or <keep-alive> is removed from the template (see Step 6), the cache clears and the component is destroyed.

Visual Quiz - 3 Questions

Look at the execution_table, what is the cache status after the user first hides the component (Step 2)?

A Cache cleared

B Cache empty

C Component cached

D Component destroyed

💡 Hint

Check the 'Cache Status' column at Step 2 in the execution_table.

At which step does the ExpensiveComponent restore from cache without running setup again?

A Step 1

B Step 3

C Step 6

D Step 2

💡 Hint

Look at the 'Component State' column describing setup or restore in the execution_table.

If the <keep-alive> wrapper is removed, what happens to the component when toggled off?

A Component is destroyed and state lost

B Component is hidden but state preserved

C Component is cached and preserved

D Component setup runs again immediately

💡 Hint

Refer to Step 6 and the explanation about cache clearing when is removed.

Concept Snapshot

Vue <keep-alive> caches components to preserve state.
Wrap expensive components with <keep-alive>.
When toggled off, component is hidden but kept alive.
When toggled on again, component restores without re-setup.
Cache clears only when component unmounts or <keep-alive> removed.

Full Transcript

This visual execution shows how Vue's <keep-alive> works to cache expensive components. Initially, the component mounts and runs its setup. When the user hides it using v-if, the component is not destroyed but hidden and cached. Later, when shown again, the component restores from cache without running setup again, preserving its state. The cache remains until the component is unmounted or <keep-alive> is removed, at which point the component is destroyed and cache cleared. This helps improve performance by avoiding repeated expensive setup work.

Practice

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

easy

A. To cache components and preserve their state when toggled

B. To permanently remove components from the DOM

C. To force components to reload every time they are shown

D. To style components with CSS animations

Solution

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

   <keep-alive> caches components so they don't reload when toggled.

2. Step 2: Compare options to this behavior

   Only 'To cache components and preserve their state when toggled' describes caching and preserving state, which is the main purpose.

3. Final Answer:

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

4. Quick Check:

   Keep-alive caches components [OK]

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

Common Mistakes:

• Thinking keep-alive removes components
• Confusing keep-alive with styling or animations
• Assuming keep-alive forces reloads

2. Which of the following is the correct syntax to wrap a dynamic component with keep-alive in Vue 3?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Vue 3 syntax for keep-alive

   The <keep-alive> tag wraps the dynamic <component> with :is binding.

2. Step 2: Check each option's correctness

   <keep-alive><component :is="currentView" /></keep-alive> correctly wraps <component :is="currentView" /> inside <keep-alive>. Others misuse attributes or tags.

3. Final Answer:

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

4. Quick Check:

   Wrap dynamic component inside keep-alive tags [OK]

Hint: Wrap inside tags [OK]

Common Mistakes:

• Using keep-alive as a self-closing tag with :is
• Adding keep-alive as a prop on component
• Nesting currentView as a tag inside component

3. Given this Vue template:

<keep-alive include="CompA,CompB">
  <component :is="currentComp" />
</keep-alive>

If currentComp changes from 'CompA' to 'CompC' and back to 'CompA', what happens to the state of 'CompA'?

medium

A. State is preserved only if 'CompC' is also included

B. State is lost because 'CompA' is not included in keep-alive

C. State is preserved because 'CompA' is included in keep-alive

D. State is always reset on component switch

Solution

1. Step 1: Understand include prop effect

   The include attribute caches only components named 'CompA' and 'CompB'.

2. Step 2: Analyze component switching

   Switching to 'CompC' unloads it (not cached). Returning to 'CompA' restores cached state.

3. Final Answer:

   State is preserved because 'CompA' is included in keep-alive -> Option C

4. Quick Check:

   Include caches listed components [OK]

Hint: Only included components keep state cached [OK]

Common Mistakes:

• Assuming all components are cached regardless of include
• Thinking state resets on every switch
• Confusing include with exclude

4. Consider this Vue code snippet:

<keep-alive exclude="CompB">
  <component :is="currentComp" />
</keep-alive>

When switching from 'CompA' to 'CompB', the state of 'CompA' is lost. Why?

medium

A. Because 'CompB' is excluded, switching to it destroys cached components including 'CompA'

B. Because 'CompB' is excluded, only 'CompB' is not cached; 'CompA' should keep state

C. Because 'CompB' is excluded, keep-alive disables caching for all components

D. Because exclude disables keep-alive entirely

Solution

1. Step 1: Understand exclude behavior

   The exclude attribute prevents caching only for 'CompB'. Other components like 'CompA' remain cached.

2. Step 2: Analyze why 'CompA' state is lost

   If 'CompA' state is lost, likely the component is unmounted or recreated outside keep-alive scope, not due to exclude.

3. Final Answer:

   Because 'CompB' is excluded, only 'CompB' is not cached; 'CompA' should keep state -> Option B

4. Quick Check:

   Exclude only skips caching excluded components [OK]

Hint: Exclude skips caching only for listed components [OK]

Common Mistakes:

• Thinking exclude disables caching for all components
• Assuming exclude destroys other cached components
• Confusing exclude with disabling keep-alive

5. You have two expensive components, CompX and CompY. You want to cache CompX but not CompY. Which is the best way to use <keep-alive> to achieve this?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify caching goal

   You want to cache only CompX, not CompY.

2. Step 2: Use include to cache specific components

   Setting include="CompX" caches only CompX. CompY won't be cached.

3. Step 3: Check other options

   Exclude CompX caches everything except CompX (wrong). Include CompY caches only CompY (wrong). No filters caches all (wrong).

4. Final Answer:

   <keep-alive include="CompX"><component :is="currentComp" /></keep-alive> -> Option D

5. Quick Check:

   Include caches only listed components [OK]

Hint: Use include to cache only desired components [OK]

Common Mistakes:

• Using exclude to cache only one component
• Including the wrong component name
• Not using include or exclude and caching all