Keep-alive for caching components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wrap the component with keep-alive.

Vue

<template>
  <[1]>
    <MyComponent />
  </[1]>
</template>

Drag options to blanks, or click blank then click option'

Atransition

Bkeep-alive

Crouter-view

Dsuspense

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of .

Forgetting to wrap the component at all.

The keep-alive tag caches the component to preserve its state.

2fill in blank

medium

Complete the code to cache only components named 'Home' and 'Profile'.

Vue

<keep-alive include="[1]">
  <component :is="currentView" />
</keep-alive>

Drag options to blanks, or click blank then click option'

A"Home,Profile"

B"home,profile"

C"Home Profile"

D"home profile"

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces instead of commas.

Using lowercase names when components are PascalCase.

The include attribute takes a comma-separated list of component names with exact casing.

3fill in blank

hard

Fix the error in the code to properly cache components except 'Settings'.

Vue

<keep-alive exclude="[1]">
  <component :is="currentView" />
</keep-alive>

Drag options to blanks, or click blank then click option'

ASettings

B'Settings'

C"settings"

D"Settings"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the component name.

Using single quotes instead of double quotes.

The exclude attribute requires a string with component names in quotes.

4fill in blank

hard

Fill both blanks to cache components with names starting with 'User' and exclude 'UserAdmin'.

Vue

<keep-alive include="[1]" exclude="[2]">
  <component :is="currentView" />
</keep-alive>

Drag options to blanks, or click blank then click option'

A"User*"

B"UserAdmin"

C"Admin*"

D"User"

Attempts:

3 left

💡 Hint

Common Mistakes

Using exact names in include without wildcard.

Excluding with a wildcard instead of exact name.

The include supports wildcards like User* to match names starting with 'User'. The exclude attribute lists exact names to skip caching.

5fill in blank

hard

Fill all three blanks to cache components with keys and control caching with max and max-age.

Vue

<keep-alive :include="[1]" :max="[2]" :max-age="[3]">
  <component :is="currentView" />
</keep-alive>

Drag options to blanks, or click blank then click option'

A["Dashboard", "Settings"]

B5

C60000

D["dashboard", "settings"]

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names in include array.

Passing max and max-age as strings instead of numbers.

The :include prop takes an array of component names with exact casing. :max limits the number of cached components. :max-age sets cache duration in milliseconds.