Keep-alive for expensive components in Vue - Mini Project: Build & Apply

Keep-alive for Expensive Components in Vue

📖 Scenario: You are building a Vue app with two components that simulate expensive loading times. You want to switch between these components without losing their state or reloading them every time.

🎯 Goal: Create a Vue app with two components named ExpensiveOne and ExpensiveTwo. Use Vue's <keep-alive> feature to keep these components alive when switching, so their state is preserved and they do not reload.

📋 What You'll Learn

Create two components named ExpensiveOne and ExpensiveTwo with a simple template and a data property count initialized to 0.

Add a button in each component to increment the count value.

Create a main Vue app that switches between these two components using a currentComponent variable.

Wrap the dynamic component with <keep-alive> to preserve component state when switching.

💡 Why This Matters

🌍 Real World

Many apps have components that take time to load or have user input. Using keep-alive helps keep their state so users don't lose data when switching views.

💼 Career

Understanding keep-alive is important for Vue developers to optimize app performance and user experience by avoiding unnecessary reloads.

1

Create two components with a count state

Create two Vue components named ExpensiveOne and ExpensiveTwo. Each should have a template with a heading showing the component name and a paragraph showing a count data property initialized to 0. Add a button that increments count when clicked.

Vue

# Your code here to define ExpensiveOne and ExpensiveTwo components with count and button

Hint

Use ref(0) to create the count state in each component's setup() function. Use @click on the button to increase count.

2

Add a variable to track the current component

In the main Vue app, create a ref variable named currentComponent and set it to ExpensiveOne. This will track which component to show.

Vue

import { ref } from 'vue'

const ExpensiveOne = {
  template: `
    
      ExpensiveOne
      Count: {{ count }}
      Increment
    
  `,
  setup() {
    const count = ref(0)
    return { count }
  }
}

const ExpensiveTwo = {
  template: `
    
      ExpensiveTwo
      Count: {{ count }}
      Increment
    
  `,
  setup() {
    const count = ref(0)
    return { count }
  }
}

// Create currentComponent variable here
# Your code here

Hint

Use ref(ExpensiveOne) to create the currentComponent variable.

3

Add buttons to switch components and use dynamic component

Add two buttons labeled Show ExpensiveOne and Show ExpensiveTwo. When clicked, they set currentComponent to ExpensiveOne or ExpensiveTwo respectively. Below the buttons, add a <component> tag with :is="currentComponent" to show the selected component dynamically.

Vue

import { ref } from 'vue'

const ExpensiveOne = {
  template: `
    
      ExpensiveOne
      Count: {{ count }}
      Increment
    
  `,
  setup() {
    const count = ref(0)
    return { count }
  }
}

const ExpensiveTwo = {
  template: `
    
      ExpensiveTwo
      Count: {{ count }}
      Increment
    
  `,
  setup() {
    const count = ref(0)
    return { count }
  }
}

const currentComponent = ref(ExpensiveOne)



  
  Show ExpensiveOne
  Show ExpensiveTwo
  

Hint

Use @click on buttons to set currentComponent. Use <component :is="currentComponent" /> to show the chosen component.

4

Wrap the dynamic component with <keep-alive>

Wrap the <component :is="currentComponent" /> tag inside a <keep-alive> tag. This will keep the components alive and preserve their state when switching.

Vue

import { ref } from 'vue'

const ExpensiveOne = {
  template: `
    
      ExpensiveOne
      Count: {{ count }}
      Increment
    
  `,
  setup() {
    const count = ref(0)
    return { count }
  }
}

const ExpensiveTwo = {
  template: `
    
      ExpensiveTwo
      Count: {{ count }}
      Increment
    
  `,
  setup() {
    const count = ref(0)
    return { count }
  }
}

const currentComponent = ref(ExpensiveOne)



  Show ExpensiveOne
  Show ExpensiveTwo
  
  # Your code here

Hint

Wrap the <component> tag inside <keep-alive> tags to preserve component state.

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