摘要

<KeepAlive> 是一個內建的包裝元件，它能將其內部被切換掉的動態元件「快取」在記憶體中，而不是銷毀它們。當元件再次被切換回來時，可以保持其離開時的狀態。

定義與說明

當動態元件（如使用 <component :is="...">）在 <KeepAlive> 標籤內部被切換時，非作用中的元件實例會被保留，而不是被銷毀。這對於避免重複渲染、保留使用者輸入或滾動位置等場景非常有用。

實作範例

KeepAlive 示例

<!-- 在 Day 41 的範例基礎上，用 <KeepAlive> 包裝 -->
<template>
  <button @click="currentTab = tabs.ComponentA">顯示 A</button>
  <button @click="currentTab = tabs.ComponentB">顯示 B</button>

  <!--
    現在，當你在 A 元件的輸入框打字，然後切換到 B，再切換回 A，
    你會發現 A 元件輸入框的內容依然存在。
  -->
  <KeepAlive>
    <component :is="currentTab" />
  </KeepAlive>
</template>

結論

<KeepAlive> 是一個用於效能優化和改善使用者體驗的強大工具。它透過快取元件實例，避免了不必要的重新渲染和狀態丟失。

KeepAlive 快取狀態保持