Keep-alive for expensive 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]>
    <ExpensiveComponent />
  </[1]>
</template>

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

Atransition

Bkeep-alive

Csuspense

Dteleport

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of causes no caching.

Using is for async components, not caching.

Using moves DOM nodes, not caching.

The keep-alive tag caches the component to avoid re-rendering.

2fill in blank

medium

Complete the code to conditionally cache the component only when active.

Vue

<template>
  <keep-alive :[1]="isActive">
    <ExpensiveComponent />
  </keep-alive>
</template>

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

Amax

Bexclude

Cinclude

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using include or exclude filters components by name, not boolean.

Using max is for limiting cache size, not enabling/disabling caching.

The disabled prop controls if caching is active by enabling or disabling it.

3fill in blank

hard

Fix the error in the code to properly cache only components named 'ExpensiveComponent'.

Vue

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

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

A"ExpensiveComponent"

BExpensiveComponent

C'ExpensiveComponent'

D['ExpensiveComponent']

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted names causes Vue to look for variables.

Using single quotes inside double quotes breaks HTML attribute syntax.

Passing an array is invalid for the include prop.

The include prop expects a string or regex with component names in quotes.

4fill in blank

hard

Fill both blanks to cache components named 'ExpensiveComponent' and exclude 'CheapComponent'.

Vue

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

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

A"ExpensiveComponent"

B"CheapComponent"

C'CheapComponent'

D'ExpensiveComponent'

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes inside attributes breaks HTML syntax.

Swapping include and exclude values causes wrong caching behavior.

The include and exclude props accept strings with component names in double quotes.

5fill in blank

hard

Fill all three blanks to cache components named 'ExpensiveComponent', enable caching conditionally, and exclude 'TemporaryComponent'.

Vue

<template>
  <keep-alive include=[1] :max=[2] exclude=[3]>
    <component :is="currentComponent" />
  </keep-alive>
</template>

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

A"ExpensiveComponent"

BisCachingActive

C"TemporaryComponent"

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted component names causes errors.

Passing a string instead of a boolean for max causes runtime issues.

Mixing up include and exclude values.

Use include and exclude with component names as strings, and max with a boolean or variable controlling caching.