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

Recall & Review

beginner

What is the purpose of the component in Vue?

The component caches inactive Vue components, preserving their state and avoiding re-rendering when they are switched back into view.

beginner

How do you wrap components to enable caching with ?

You wrap dynamic components or router views inside tags, like <component :is="currentView" />.

intermediate

What props can you use with to control which components are cached?

You can use include and exclude props with component names to specify which components to cache or ignore.

intermediate

What lifecycle hooks are triggered when a component is cached and then activated again?

When cached, the component's deactivated hook runs when hidden, and activated runs when it becomes active again.

beginner

Why is useful for improving user experience in Vue apps?

It speeds up navigation by reusing component state and DOM, reducing loading time and preserving user input or scroll position.

What does the component do in Vue?

A Automatically reloads components on every render

B Removes components from the DOM permanently

C Caches inactive components to preserve their state

D Converts components into plain HTML

caches inactive components so they keep their state and don't re-render unnecessarily.

Which prop of lets you specify components to cache?

A include

B exclude

C cache

D preserve

The include prop specifies which component names to cache inside .

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

A mounted

B activated

C created

D deactivated

The activated hook runs when a cached component is reactivated and shown again.

How do you use with dynamic components?

A Wrap the dynamic component inside <keep-alive> tags

B Add a cache attribute to the component

C Use a special caching plugin

D No special action is needed

You wrap dynamic components inside to cache them when inactive.

What benefit does provide to user experience?

A Slower navigation but better visuals

B Removes all component data on switch

C Automatically fixes bugs in components

D Preserves component state and speeds up navigation

preserves state and DOM, making navigation faster and smoother for users.

Explain how works in Vue and why you would use it.

Think about how to keep a component's data and appearance when switching views.

Describe the lifecycle hooks related to and their roles.

Focus on what happens when a cached component hides and shows.