Keep-alive for caching components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a component is wrapped with in Vue?

Consider a Vue app where a component is wrapped inside a tag. What is the main effect of this wrapping on the component's lifecycle?

Vue

<template>
  <keep-alive>
    <MyComponent v-if="show" />
  </keep-alive>
</template>

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

A The component's template is cached but its data is reset every time it is shown.

B The component is destroyed immediately when toggled off and recreated fresh when toggled on.

C The component is cached and its state is preserved when toggled off and on.

D The component is rendered twice to improve performance.

💡 Hint

Think about what caching means for a component's state and lifecycle.

Wrapping a component with caches it in memory. When the component is toggled off (unmounted), it is not destroyed but kept alive. When toggled on again, it resumes with its previous state and lifecycle hooks like created are not called again.

❓ state_output

intermediate

What is the value of count after toggling a cached component off and on?

Given the component below, what will be the value of count after toggling show off and then on again?

Vue

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

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

<!-- Counter.vue -->
<template>
  <button @click="count++">Count: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

A The count value remains the same as before toggling off.

B The count resets to zero after toggling off and on.

C The count increments automatically when toggled on again.

D The count value becomes undefined after toggling.

💡 Hint

Remember what does to component state.

Because the component is cached by , its internal state, including count, is preserved when toggled off and on. The count does not reset.

❓ lifecycle

advanced

Which lifecycle hooks are called when a component is toggled off and then on again?

Consider a component wrapped in . When the component is toggled off (hidden) and then toggled on (shown) again, which lifecycle hooks run?

Vue

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

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

A mounted when first shown, then activated and deactivated on toggle, but not unmounted or created again.

B created and mounted every time it is toggled on, destroyed when toggled off.

C activated and deactivated only once when the app loads.

D only mounted once and never activated or deactivated.

💡 Hint

Think about the special lifecycle hooks activated and deactivated in Vue.

When using , the component is mounted once. When toggled off, it triggers deactivated but is not destroyed. When toggled on again, it triggers activated. The created and mounted hooks do not run again.

📝 Syntax

advanced

Which option correctly uses with include prop to cache only specific components?

You want to cache only components named 'Home' and 'Profile' using . Which syntax is correct?

A

<keep-alive include="['Home', 'Profile']">
  <component :is="currentView" />
</keep-alive>

B

<keep-alive include="Home,Profile">
  <component :is="currentView" />
</keep-alive>

C

<keep-alive include={[Home, Profile]}>
  <component :is="currentView" />
</keep-alive>

D

<keep-alive :include="['Home', 'Profile']">
  <component :is="currentView" />
</keep-alive>

💡 Hint

Check how to bind props dynamically in Vue templates.

The include prop expects a string or an array of component names. To pass an array, you must bind the prop using :. Option D correctly binds an array of strings. Option D passes a string but without binding, so it is treated as a literal string. Options C and D have syntax errors.

🔧 Debug

expert

Why does a cached component not update when its props change?

You wrapped a component with to cache it. However, when the parent changes the props passed to this component, the component does not update its display. What is the most likely cause?

Vue

<template>
  <keep-alive>
    <MyComponent :value="parentValue" />
  </keep-alive>
  <button @click="parentValue++">Change Value</button>
</template>

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
const parentValue = ref(0)
</script>

A Props cannot be passed to components inside <keep-alive>.

B The component caches its state and does not react to prop changes unless a key is used to force re-render.

C The <keep-alive> disables all reactive updates inside the component.

D The parentValue ref is not reactive, so changes are not detected.

💡 Hint

Consider how Vue tracks component identity and updates with .

caches the component instance and preserves its state. If the component relies on props but does not watch for changes or is not keyed properly, it may not update when props change. Using a key on the component forces Vue to recreate it and update props.