Keep-alive for expensive components in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the component in Vue?

The component caches inactive components to avoid re-rendering them, improving performance for expensive components.

beginner

How does improve user experience with expensive components?

By caching components, lets users switch back without waiting for the component to reload or fetch data again.

intermediate

Which Vue lifecycle hooks are called when a component is activated or deactivated inside ?

The activated() hook runs when the component is inserted back, and deactivated() runs when it is cached but hidden.

intermediate

How can you control which components caches?

Use the include and exclude props with component names or regex patterns to specify which components to cache or ignore.

beginner

What happens if you don’t use for expensive components?

The component will be destroyed and recreated every time it is switched, causing delays and repeated data fetching.

What does the component do in Vue?

A Removes components from the DOM permanently

B Caches inactive components to improve performance

C Automatically updates component data

D Prevents components from rendering

caches inactive components so they don’t get destroyed, speeding up switching.

Which lifecycle hook runs when a cached component becomes active again inside ?

A created()

B mounted()

C activated()

D deactivated()

activated() runs when a cached component is inserted back into the DOM.

How can you specify which components should cache?

A Using the include and exclude props

B Using the v-if directive

C Using the v-show directive

D Using the ref attribute

include and exclude props let you control caching by component name or pattern.

What is a common use case for ?

A Styling components dynamically

B Loading external scripts

C Handling user input events

D Caching expensive components like charts or forms

is great for caching components that take time to load or render.

What happens to a component inside when it is not active?

A It remains cached but hidden

B It reloads data automatically

C It is destroyed and removed from memory

D It becomes read-only

Inactive components inside stay cached in memory but are hidden from view.

Explain how works in Vue and why it is useful for expensive components.

Think about switching tabs or views without waiting for reload.

Describe how to control which components are cached by and mention relevant lifecycle hooks.

Focus on props and lifecycle hooks related to caching.