EP42 - 狀態保持

更新於 2024/10/19發佈於 2024/10/19閱讀時間約 7 分鐘

KeepAlive這是啥？以前好像聽過類似的觀念
繼續看下去吧～內建的組件應該都是很實用的吧！

<KeepAlive> 是一個內建組件，允許我們在動態切換多個組件時有條件地緩存組件實例。

基本用法 - Basic Usage

在組件基礎章節中，我們介紹了動態組件的語法，使用特殊元素 <component>：

<template>
  <component :is="activeComponent" />
</template>

預設情況下，當切換離開一個活動的組件實例時，它會被卸載，這會導致它所持有的任何狀態更改都會丟失。當再次顯示這個組件時，會創建一個新的實例，只有初始狀態。

在下面的例子中，我們有兩個有狀態的組件——A 包含一個計數器，而 B 包含一個通過 v-model 與輸入同步的消息。嘗試更新其中一個的狀態，切換離開，然後再切換回來：

<template>
  <div>
    <button @click="activeComponent = 'A'">A</button>
    <button @click="activeComponent = 'B'">B</button>
    <component :is="activeComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeComponent: 'A'
    }
  },
  components: {
    A: {
      template: '<div>Count: {{ count }} <button @click="count++">+</button></div>',
      data() {
        return { count: 0 }
      }
    },
    B: {
      template: '<div>Message: <input v-model="message" /></div>',
      data() {
        return { message: 'Hello' }
      }
    }
  }
}
</script>

您會注意到當切換回來時，之前更改的狀態已經被重置。

在切換時創建新的組件實例通常是有用的行為，但在這種情況下，我們希望即使這些組件處於非活動狀態時，也能保留它們的實例。為了解決這個問題，我們可以使用內建組件 <KeepAlive> 包裝我們的動態組件：

<template>
  <!-- 非活動組件將會被緩存！ -->
  <KeepAlive>
    <component :is="activeComponent" />
  </KeepAlive>
</template>

現在，狀態將在組件切換之間保持不變。

Try it in the playground

提示

當在 DOM 模板中使用時，應以 <keep-alive> 的形式引用。

包含/排除 - Include / Exclude

默認情況下，<KeepAlive> 會緩存其內部的任何組件實例。我們可以通過 include 和 exclude 屬性來自定義這種行為。這兩個屬性都可以是逗號分隔的字符串、正則表達式，或包含任意類型的數組：

<!-- 逗號分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正則表達式 (使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 數組 (使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

匹配檢查基於組件的 name 選項，因此需要被 KeepAlive 條件性緩存的組件必須明確聲明 name 選項。

提示

自版本 3.2.34 起，使用 <script setup> 的單文件組件將自動根據文件名推斷其 name 選項，無需手動聲明 name。

最大緩存實例 - Max Cached Instances

我們可以通過 max 屬性限制可以緩存的組件實例的最大數量。當指定了 max 時，<KeepAlive> 會像 LRU（最近最少使用）緩存一樣運行：如果緩存的實例數量即將超過指定的最大數量，最久未被訪問的緩存實例將被銷毀以騰出空間給新的實例。

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

緩存實例的生命周期 - Lifecycle of Cached Instance

當組件實例從 DOM 中移除但仍是 <KeepAlive> 緩存的組件樹的一部分時，它會進入停用狀態而不是被卸載。當組件實例作為緩存樹的一部分插入 DOM 中時，它會被激活。

被保持活著的組件可以使用 onActivated() 和 onDeactivated() 註冊這兩種狀態的生命周期鉤子：

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 初次掛載時調用
  // 並且每次從緩存重新插入時調用
})

onDeactivated(() => {
  // 從 DOM 中移除進入緩存時調用
  // 以及卸載時調用
})
</script>