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

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a component is wrapped with in Vue 3?

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

Vue

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

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

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

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

C The component's template is cached but its data and state are reset every time.

D The component is never rendered because <keep-alive> disables rendering.

💡 Hint

Think about what does to component instances in Vue.

Wrapping a component with caches the component instance. When the component is toggled off (unmounted), Vue keeps it in memory. When toggled back on, Vue reuses the cached instance, preserving its state and avoiding re-creation.

❓ lifecycle

intermediate

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

In Vue 3, if a component wrapped in is hidden (v-if false) and then shown again, which lifecycle hooks run?

Vue

<script setup>
import { onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'

onMounted(() => console.log('mounted'))
onUnmounted(() => console.log('unmounted'))
onActivated(() => console.log('activated'))
onDeactivated(() => console.log('deactivated'))
</script>

A mounted, unmounted, activated

B mounted, unmounted, mounted

C mounted, deactivated, activated, unmounted

D mounted, deactivated, activated

💡 Hint

Remember that caches the component instead of destroying it.

When a component is hidden, it triggers the deactivated hook instead of unmounted. When shown again, it triggers activated. The mounted hook runs only once when first created.

📝 Syntax

advanced

Which option correctly uses with dynamic components and includes an include prop?

Choose the correct syntax to cache only components named 'ExpensiveComponent' and 'HeavyWidget' using with dynamic components.

Vue

<template>
  <keep-alive :include="['ExpensiveComponent', 'HeavyWidget']">
    <component :is="currentComponent" />
  </keep-alive>
</template>

A

<keep-alive :include="['ExpensiveComponent', 'HeavyWidget']">
  <component :is="currentComponent" />
</keep-alive>

B

<keep-alive include="['ExpensiveComponent', 'HeavyWidget']">
  <component :is="currentComponent" />
</keep-alive>

C

<keep-alive include={ExpensiveComponent, HeavyWidget}>
  <component :is="currentComponent" />
</keep-alive>

D

<keep-alive include="ExpensiveComponent,HeavyWidget">
  <component :is="currentComponent" />
</keep-alive>

💡 Hint

Check how to bind props dynamically in Vue templates.

The include prop expects a string or an array. To pass an array, use the binding syntax :include with an array value. Option A correctly uses :include with an array.

🔧 Debug

advanced

Why does the component inside lose its state after toggling?

A developer wraps a component with but notices the component's data resets every time it is toggled off and on. What is the most likely cause?

Vue

<template>
  <keep-alive>
    <ExpensiveComponent v-if="show" :key="uniqueKey" />
  </keep-alive>
</template>

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

A The component is missing the <keep-alive> include prop to enable caching.

B The <keep-alive> tag does not cache components with v-if directives.

C The :key changes on toggle, forcing Vue to recreate the component instead of reusing it.

D The component's data is reset because it uses reactive refs inside setup.

💡 Hint

Think about how Vue uses keys to identify components.

When the :key changes, Vue treats the component as a new instance and recreates it, ignoring the cached version. This causes the state to reset despite .

🧠 Conceptual

expert

How does improve performance in Vue apps with expensive components?

Explain the main reason why using around expensive components can improve app performance.

A <keep-alive> caches component instances to avoid costly re-creation and re-rendering when toggled.

B <keep-alive> delays rendering of components until they are visible on screen.

C <keep-alive> compresses component data to reduce memory usage during runtime.

D <keep-alive> automatically splits component code into smaller chunks for faster loading.

💡 Hint

Think about what happens when a component is removed and added back without caching.

keeps component instances alive in memory, so Vue does not destroy and recreate them. This saves time and resources, especially for components that take a long time to mount or fetch data.

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