keep-alive का उपयोग

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <button @click="tab = tab === 'note-a' ? 'note-b' : 'note-a'">Switch</button>
  <keep-alive><component :is="tab"></component></keep-alive>
</div>
<script>
  const app = Vue.createApp({ data() { return { tab: "note-a" }; } });
  app.component("note-a", { data() { return { text: "draft" }; }, template: "<p>A: {{ text }} <button @click=\"text += '!'\">edit</button></p>" });
  app.component("note-b", { template: "<p>B</p>" });
  app.mount("#app");
  (async () => {
    document.querySelectorAll("button")[1].click(); await Vue.nextTick();     // edit A
    document.querySelectorAll("button")[0].click(); await Vue.nextTick();     // to B
    document.querySelectorAll("button")[0].click(); await Vue.nextTick();     // back to A
    console.log("state kept after switching:", document.querySelector("p").textContent);
  })();
</script>
</body>
</html>

<!-- Output:
Rendered: SwitchA: draft! edit
console: state kept after switching: A: draft! edit
-->