KeepAlive

<KeepAlive> 是一個内置組件，它的功能(néng)是在多個組件間動态切換時(shí)緩存被移除的組件實例。

基本使用(yòng) ​

在組件基礎章節中，我們已經介紹了(le)通過特殊的 <component> 元素來(lái)實現(xiàn)動态組件的用(yòng)法：

template

<component :is="activeComponent" />

默認情況下(xià)，一個組件實例在被替換掉後會(huì)被銷毀。這(zhè)會(huì)導緻它丢失其中所有已變化的狀态——當這(zhè)個組件再一次被顯示時(shí)，會(huì)創建一個隻帶有初始狀态的新實例。

在下(xià)面的例子中，你(nǐ)會(huì)看(kàn)到(dào)兩個有狀态的組件——A 有一個計(jì)數器，而 B 有一個通過 v-model 同步 input 框輸入内容的文(wén)字展示。嘗試先更改一下(xià)任意一個組件的狀态，然後切走，再切回來(lái)：

A B

Current component: A

count: 0+

你(nǐ)會(huì)發現(xiàn)在切回來(lái)之後，之前已更改的狀态都被重置了(le)。

在切換時(shí)創建新的組件實例通常是有意義的，但(dàn)在這(zhè)個例子中，我們的确想要組件能(néng)在被“切走”的時(shí)候保留它們的狀态。要解決這(zhè)個問題，我們可以用(yòng) <KeepAlive> 内置組件将這(zhè)些(xiē)動态組件包裝起來(lái)：

template

<!-- 非活躍的組件将會(huì)被緩存！ -->

<KeepAlive>

<component :is="activeComponent" />

</KeepAlive>

TIP

在 DOM 模闆中使用(yòng)時(shí)，它應該被寫爲 <keep-alive>。

包含/排除 ​

<KeepAlive> 默認會(huì)緩存内部的所有組件實例，但(dàn)我們可以通過 include 和(hé) exclude prop 來(lái)定制該行爲。這(zhè)兩個 prop 的值都可以是一個以英文(wén)逗号分隔的字符串、一個正則表達式，或是包含這(zhè)兩種類型的一個數組：

template

<!-- 以英文(wén)逗号分隔的字符串 -->

<KeepAlive include="a,b">

<component :is="view" />

</KeepAlive>

<!-- 正則表達式 (需使用(yòng) `v-bind`) -->

<KeepAlive :include="/a|b/">

<component :is="view" />

</KeepAlive>

<!-- 數組 (需使用(yòng) `v-bind`) -->

<KeepAlive :include="['a', 'b']">

<component :is="view" />

</KeepAlive>

它會(huì)根據組件的 name 選項進行匹配，所以組件如果想要條件性地被 KeepAlive 緩存，就必須顯式聲明(míng)一個 name 選項。

TIP

在 3.2.34 或以上(shàng)的版本中，使用(yòng) <script setup> 的單文(wén)件組件會(huì)自(zì)動根據文(wén)件名生成對(duì)應的 name 選項，無需再手動聲明(míng)。

最大(dà)緩存實例數 ​

我們可以通過傳入 max prop 來(lái)限制可被緩存的最大(dà)組件實例數。<KeepAlive> 的行爲在指定了(le) max 後類似一個 LRU 緩存：如果緩存的實例數量即将超過指定的那個最大(dà)數量，則最久沒有被訪問的緩存實例将被銷毀，以便爲新的實例騰出空(kōng)間。

template

<KeepAlive :max="10">

<component :is="activeComponent" />

</KeepAlive>

緩存實例的生命周期 ​

當一個組件實例從(cóng) DOM 上(shàng)移除但(dàn)因爲被 <KeepAlive> 緩存而仍作(zuò)爲組件樹的一部分時(shí)，它将變爲不活躍狀态而不是被卸載。當一個組件實例作(zuò)爲緩存樹的一部分插入到(dào) DOM 中時(shí)，它将重新被激活。

一個持續存在的組件可以通過 activated 和(hé) deactivated 選項來(lái)注冊相應的兩個狀态的生命周期鈎子：

js

export default {

activated() {

// 在首次挂載、

// 以及每次從(cóng)緩存中被重新插入的時(shí)候調用(yòng)

},

deactivated() {

// 在從(cóng) DOM 上(shàng)移除、進入緩存

// 以及組件卸載時(shí)調用(yòng)

}

}

請(qǐng)注意：

activated 在組件挂載時(shí)也(yě)會(huì)調用(yòng)，并且 deactivated 在組件卸載時(shí)也(yě)會(huì)調用(yòng)。

這(zhè)兩個鈎子不僅适用(yòng)于 <KeepAlive> 緩存的根組件，也(yě)适用(yòng)于緩存樹中的後代組件。