KeepAlive

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

基本使用 ​

在組件基礎章(zhāng)節中，我們已經介紹了(le)通(tōng)過特殊的 <component> 元素來實現動态組件的用法：

template

<component :is="activeComponent" />

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

在下(xià)面的例子中，你會看(kàn)到兩個有狀态的組件——A 有一(yī)個計數(shù)器，而 B 有一(yī)個通(tōng)過 v-model 同步 input 框輸入內(nèi)容的文字展示。嘗試先更改一(yī)下(xià)任意一(yī)個組件的狀态，然後切走，再切回來：

A B

Current component: A

count: 0+

你會發現在切回來之後，之前已更改的狀态都(dōu)被重置了(le)。

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

template

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

<KeepAlive>

<component :is="activeComponent" />

</KeepAlive>

TIP

在 DOM 模闆中使用時(shí)，它應該被寫為(wèi) <keep-alive>。

包含/排除 ​

<KeepAlive> 默認會緩存內(nèi)部的所有組件實例，但(dàn)我們可(kě)以通(tōng)過 include 和(hé) exclude prop 來定制該行(xíng)為(wèi)。這(zhè)兩個 prop 的值都(dōu)可(kě)以是一(yī)個以英文逗号分隔的字符串、一(yī)個正則表達式，或是包含這(zhè)兩種類型的一(yī)個數(shù)組：

template

<!-- 以英文逗号分隔的字符串 -->

<KeepAlive include="a,b">

<component :is="view" />

</KeepAlive>

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

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

<component :is="view" />

</KeepAlive>

<!-- 數(shù)組 (需使用 `v-bind`) -->

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

<component :is="view" />

</KeepAlive>

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

TIP

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

最大緩存實例數(shù) ​

我們可(kě)以通(tōng)過傳入 max prop 來限制可(kě)被緩存的最大組件實例數(shù)。<KeepAlive> 的行(xíng)為(wèi)在指定了(le) max 後類似一(yī)個 LRU 緩存：如(rú)果緩存的實例數(shù)量即将超過指定的那(nà)個最大數(shù)量，則最久沒有被訪問(wèn)的緩存實例将被銷毀，以便為(wèi)新的實例騰出空間(jiān)。

template

<KeepAlive :max="10">

<component :is="activeComponent" />

</KeepAlive>

緩存實例的生命周期 ​

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

一(yī)個持續存在的組件可(kě)以通(tōng)過 activated 和(hé) deactivated 選項來注冊相應的兩個狀态的生命周期鈎子：

js

export default {

activated() {

// 在首次挂載、

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

},

deactivated() {

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

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

}

}

請(qǐng)注意：

activated 在組件挂載時(shí)也會調用，并且 deactivated 在組件卸載時(shí)也會調用。

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