How do dynamic components and keep-alive work?

Question

IT Interview Practice · Accepted Answer

Vue's `` lets you **render a component decided at runtime**, and `` caches those components so they preserve state when switched away and back. ## Dynamic components with ```vue ``` `:is` can take a component (object) or a registered component name string. This is the idiomatic way to build **tab systems, wizards, or dashboards** where the displayed component changes. ## The problem: switching destroys state By default, switching away **unmounts** the old component — losing its state (scroll position, form input, fetched data). When you switch back, it re-mounts fresh. ## KeepAlive — cache and preserve state ```vue ``` Wrapping in `` keeps switched-away components **alive in memory**, so their state is preserved when you return to them — no re-fetching or lost input. ## Controlling and reacting to caching ```vue ``` ```vue ``` Cached components get special lifecycle hooks (`onActivated`/`onDeactivated`) instead of mount/unmount, so you can refresh data when they reappear. ## Why it matters Dynamic components (``) are the clean way to render runtime-chosen components — the backbone of tabs, wizards, and pluggable layouts. `` solves the common UX problem of losing state when toggling between views (e.g. preserving a half-filled form or scroll position across tabs), with `include`/`max` for control and `onActivated`/`onDeactivated` for cache-aware logic.

How do dynamic components and keep-alive work?

Dynamic components with <component :is>

The problem: switching destroys state

KeepAlive — cache and preserve state

Controlling and reacting to caching

Why it matters

Related questions