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

Keep-alive for caching components

📖 Scenario: You are building a simple Vue app with two components: HomeView and ProfileView. You want to switch between these views using buttons. To improve user experience, you want to keep the state of each component cached so that when you switch back, the component does not reload from scratch.

🎯 Goal: Create a Vue app that uses the <keep-alive> wrapper to cache the HomeView and ProfileView components when switching between them.

📋 What You'll Learn

Create two components named HomeView and ProfileView with simple content

Create a reactive variable currentView to track which component to show

Use buttons to switch currentView between 'HomeView' and 'ProfileView'

Wrap the dynamic component with <keep-alive> to cache the components

💡 Why This Matters

🌍 Real World

Caching components with <code>&lt;keep-alive&gt;</code> is useful in apps where users switch between views frequently, like dashboards or profile pages, to improve performance and user experience.

💼 Career

Understanding component caching is important for frontend developers working with Vue to build fast, responsive, and user-friendly applications.

1

Create the two components

Create two Vue components named HomeView and ProfileView. Each component should have a <template> with a <div> containing the text "This is Home View" for HomeView and "This is Profile View" for ProfileView. Use the <script setup> syntax for each component.

Vue

  



// Your code here





  



// Your code here

Hint

Each component needs a template with a div showing the text. Use <script setup> even if empty.

2

Set up the main app with currentView variable

In your main Vue component (e.g., App.vue), import ref from vue and create a reactive variable called currentView initialized to 'HomeView'. Also import the HomeView and ProfileView components.

Vue

import { ref } from 'vue'
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'

// Your code here

Hint

Use ref to create currentView and set it to 'HomeView'. Import both components.

3

Add buttons to switch views and dynamic component rendering

Add two buttons labeled Home and Profile. When clicked, they should set currentView.value to 'HomeView' or 'ProfileView' respectively. Below the buttons, use the <component> tag with :is="currentView" to render the selected component dynamically.

Vue

import { ref } from 'vue'
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'

const currentView = ref('HomeView')



  
  

Hint

Use @click on buttons to change currentView. Use <component :is="currentView" /> to show the selected component.

4

Wrap the dynamic component with keep-alive

Wrap the <component :is="currentView" /> tag inside a <keep-alive> tag to cache the components when switching between them.

Vue

import { ref } from 'vue'
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'

const currentView = ref('HomeView')



  Home
  Profile

  
  

Hint

Wrap the dynamic component inside <keep-alive> tags to cache it.

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