KeepAlive

<KeepAlive> 是一個(gè)內(nèi)置組件，它的功能是在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例。

基本使用

默認(rèn)情況下，一個(gè)組件實(shí)例在被替換掉后會(huì)被銷毀。這會(huì)導(dǎo)致它丟失其中所有已變化的狀態(tài)——當(dāng)這個(gè)組件再一次被顯示時(shí)，會(huì)創(chuàng)建一個(gè)只帶有初始狀態(tài)的新實(shí)例。

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

<script?lang="ts"?setup>
import?Com23_1?from?'@/components/demo/Com23-1.vue'
import?Com23_2?from?'@/components/demo/Com23-2.vue'
import?{?ref,?shallowRef?}?from?'vue'const?current?=?shallowRef(Com23_1)
</script><template><div?class="container"><label><input?type="radio"?v-model="current"?:value="Com23_1"?/>組件1</label><label><input?type="radio"?v-model="current"?:value="Com23_2"?/>組件2</label><component?:is="current"></component></div>
</template><style?lang="scss"?scoped>
.container?{
}
</style>

未加 keeplive 效果

你會(huì)發(fā)現(xiàn)在切回來之后，之前已更改的狀態(tài)都被重置了。適用于在切換時(shí)創(chuàng)建新的組件實(shí)例場景。

加上 keeplive 保證組件能在被“切走”的時(shí)候保留它們的狀態(tài)。

...
...
<KeepAlive><component?:is="current"></component>
</KeepAlive>
...
...

在 DOM 內(nèi)模板中使用時(shí)，它應(yīng)該被寫為 <keep-alive>。

包含/排除

<KeepAlive> 默認(rèn)會(huì)緩存內(nèi)部的所有組件實(shí)例，但我們可以通過 include 和 exclude prop 來定制該行為。

這兩個(gè) prop 的值都可以是一個(gè)以英文逗號(hào)分隔的字符串、一個(gè)正則表達(dá)式，或是包含這兩種類型的一個(gè)數(shù)組：

<!--?以英文逗號(hào)分隔的字符串?-->
<KeepAlive?include="a,b"><component?:is="view"?/>
</KeepAlive><!--?正則表達(dá)式?(需使用?`v-bind`)?-->
<KeepAlive?:include="/a|b/"><component?:is="view"?/>
</KeepAlive><!--?數(shù)組?(需使用?`v-bind`)?-->
<KeepAlive?:include="['a',?'b']"><component?:is="view"?/>
</KeepAlive>

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

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

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

我們可以通過傳入 max prop 來限制可被緩存的最大組件實(shí)例數(shù)。 <KeepAlive> 的行為在指定了 max 后類似一個(gè) LRU 緩存：如果緩存的實(shí)例數(shù)量即將超過指定的那個(gè)最大數(shù)量，則最久沒有被訪問的緩存實(shí)例將被銷毀，以便為新的實(shí)例騰出空間。

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

緩存實(shí)例的生命周期

當(dāng)一個(gè)組件實(shí)例從 DOM 上移除但因?yàn)楸?<KeepAlive> 緩存而仍作為組件樹的一部分時(shí)，它將變?yōu)椴换钴S狀態(tài)而不是被卸載。

當(dāng)一個(gè)組件實(shí)例作為緩存樹的一部分插入到 DOM 中時(shí)，它將重新被激活。

一個(gè)持續(xù)存在的組件可以通過 onActivated() 和 onDeactivated() 注冊相應(yīng)的兩個(gè)狀態(tài)的生命周期鉤子：

<script?setup>
import?{?onActivated,?onDeactivated?}?from?'vue'onActivated(()?=>?{//?調(diào)用時(shí)機(jī)為首次掛載//?以及每次從緩存中被重新插入時(shí)
})onDeactivated(()?=>?{//?在從?DOM?上移除、進(jìn)入緩存//?以及組件卸載時(shí)調(diào)用
})
</script>

請(qǐng)注意：

• onActivated 在組件掛載時(shí)也會(huì)調(diào)用，并且 onDeactivated 在組件卸載時(shí)也會(huì)調(diào)用。

• 這兩個(gè)鉤子不僅適用于 <KeepAlive> 緩存的根組件，也適用于緩存樹中的后代組件。

---

歡迎關(guān)注，后面會(huì)有一些資源可以免費(fèi)獲取喲~

分享前后端編程經(jīng)驗(yàn)，技術(shù)干貨，技術(shù)方案，好的資源，工具，提高開發(fā)效率。

?