What is keep-alive in Vue? | Interview Question

Q: What is keep-alive in Vue?

**Target Audience:** Developers who know components and [dynamic components](/interview-question/how-do-dynamic-components-work) and want to keep state across switches. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every hook log and warning below was produced by compiling and mounting the code on Vue 3.5.44 in jsdom with the repo's verify-vue-example.mjs harness. ## 1. Why This Even Matters — A Story First A restaurant has one table by the window and several groups who want it during the evening. The normal rule is brutal: when a group leaves the table, the waiter clears everything, and if they come back they start from an empty table. Now the manager adds a coat check. When a group steps away, the waiter boxes up their plates, drinks and half-finished crossword, labels the box, and shelves it. When they return, the

The problem

Question presented to candidate: "Users complain that when they go from the inbox to a draft and back, the inbox loses its scroll position and the filter they typed. Someone suggested wrapping the view in <KeepAlive>. What does that actually do, and what would you watch out for?"

What a strong answer should cover:

<KeepAlive> wraps a dynamic child and caches the component instance when it is switched away, instead of unmounting it; its state and DOM are kept off-screen.
Cached components get onActivated / onDeactivated instead of mount and unmount on each switch; onActivated also runs on the first mount.
include / exclude match the component's name option (inferred from the file name for <script setup> SFCs); max caps the cache and evicts the least recently used instance.
It needs exactly one direct component child, typically <component :is> or the slot of <RouterView>.
Cached instances keep their watchers, timers and memory alive, so cleanup and refetching belong in the activation hooks.

Clarifying questions expected:

"Should every view be cached, or only the expensive ones?"
"When a cached view comes back, should it refresh its data or show the old snapshot?"

Code / implementation expected: Yes — a dynamic tab set inside <KeepAlive> with include/exclude or max, and the activation hooks.

keep-alive

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know components and dynamic components and want to keep state across switches. Difficulty: Medium

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every hook log and warning below was produced by compiling and mounting the code on Vue 3.5.44 in jsdom with the repo's verify-vue-example.mjs harness.

1. Why This Even Matters — A Story First

A restaurant has one table by the window and several groups who want it during the evening. The normal rule is brutal: when a group leaves the table, the waiter clears everything, and if they come back they start from an empty table.

Now the manager adds a coat check. When a group steps away, the waiter boxes up their plates, drinks and half

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VueKeepAlive with max and exclude, logging every lifecycle hook

Open in playground

<script setup>
import { ref, shallowRef, defineComponent, h, onMounted, onUnmounted, onActivated, onDeactivated } from "vue";

// A factory so each tab is its own named component with its own counter.
const makeTab = (name) =>
  defineComponent({
    name, // <KeepAlive include/exclude> matches on this name
    setup() {
      const count = ref(0);
      onMounted(() => console.log(`  ${name}: mounted`));
      onActivated(() => console.log(`  ${name}: activated`));
      onDeactivated(() => console.log(`  ${name}: deactivated`));
      onUnmounted(() => console.log(`  ${name}: unmounted`));
      return () => h("button", { class: "inc", onClick: () => count.value++ }, `${name} count ${count.value}`);
    },
  });

const tabs = { Inbox: makeTab("Inbox"), Drafts: makeTab("Drafts"), Search: makeTab("Search") };
const current = shallowRef(tabs.Inbox);
</script>

<template>
  <nav>
    <button v-for="(comp, name) in tabs" :key="name" class="tab" @click="current = comp">{{ name }}</button>
  </nav>
  <!-- Cache at most 2 instances, and never cache Search -->
  <KeepAlive :max="2" exclude="Search">
    <component :is="current" />
  </KeepAlive>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.