Vue中KeepAlive內(nèi)置緩存使用詳解

更新時(shí)間：2023年10月10日 08:44:46 作者：程序員大飛1

KeepAlive 是 vue 中的內(nèi)置組件，當(dāng)多個(gè)組件動(dòng)態(tài)切換時(shí)可以對(duì)實(shí)例狀態(tài)進(jìn)行緩存，本文就來詳細(xì)的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下

KeepAlive 介紹及使用場景

KeepAlive 是 vue 中的內(nèi)置組件，當(dāng)多個(gè)組件動(dòng)態(tài)切換時(shí)可以對(duì)實(shí)例狀態(tài)進(jìn)行緩存，用法如下

<router-view v-slot="{ Component }">
    <keep-alive>
    	<component :is="Component" />
    </keep-alive>    
 </router-view>

router-view 中定義了一個(gè)信號(hào)槽，來渲染跳轉(zhuǎn)后的組件，將keep-alive 標(biāo)簽封裝在組件的外面，即可實(shí)現(xiàn)路由跳轉(zhuǎn)組件的緩存效果

KeepAlive 使用實(shí)例

下圖有兩個(gè)組件頁面1 和頁面2，組件頁面切換通過點(diǎn)擊按鈕實(shí)現(xiàn)

頁面1 是一個(gè)計(jì)數(shù)器，加一減一，默認(rèn)初始值為 0；點(diǎn)擊按鈕 頁面2 ，會(huì)跳轉(zhuǎn)一個(gè) 含有輸入框的頁面，輸入框默認(rèn)為空；

正常情況下，組件切換都會(huì)將組件置為初始化狀態(tài)，不會(huì)緩存歷史數(shù)據(jù)；如當(dāng)頁面1 中通過觸發(fā) 增加、減少按鈕將當(dāng)前值置為 5 后，當(dāng)切換到頁面2 再切換至 頁面1 ，當(dāng)前值會(huì)被重置為0，原有歷史數(shù)據(jù)并沒有被緩存下來

而 keepAlive 可以在切換時(shí)將組件內(nèi)的原有狀態(tài)數(shù)據(jù)進(jìn)行緩存；使用時(shí)只需要將需要緩存的組件外面包裹一層 <keepAlive></keepAlive> 標(biāo)簽即可，如下：

<template>
  <div class="main-test">
    <div style="margin-top:20px;margin-left: 20px;">
      <a-space>
        <a-button type="primary" style="color: blue; font-size: 14px" @click="changePageName"
          :disabled="pageName === 'A'">
          頁面1
        </a-button>
        <a-button type="primary" style="color: blue; font-size: 14px" @click="changePageName"
          :disabled="pageName === 'B'">
          頁面2
        </a-button>
      </a-space>
    </div>
    <keep-alive>
      <Page1 v-if="pageName === 'A'" style="margin-left: 20px; font-size: 16px; margin-top: 25px;">
      </Page1>
    </keep-alive>
    <keep-alive>
      <Page2 v-if="pageName === 'B'" style="margin-left: 20px; font-size: 16px; margin-top: 25px;">
      </Page2>
    </keep-alive>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Page1 from '@/components/test/Page1.vue';
import Page2 from '@/components/test/Page2.vue';
const pageName = ref('A')
function changePageName() {
  pageName.value = pageName.value === 'A' ? 'B' : 'A'
}
</script>

Page1 組件

<template>
    <div style="color: black;">
        當(dāng)前值為{{ pageName }}
        <div style="margin-top: 20px;">
            <a-space>
                <a-button @click="addNum" type="primary">
                    增加
                </a-button>
                <a-button @click="minusNum" type="primary">
                    減少
                </a-button>
            </a-space>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const pageName = ref(0)
function addNum() {
    pageName.value += 1
}
function minusNum() {
    pageName.value -= 1
}
</script>
<style scoped lang="less">
.main-test {
    font-size: large;
    color: red;
    font-weight: bold;
}
</style>

Page2 組件

<template>
    <div style="color: black;">
        輸入值
        <a-input v-model:value="pageName" style="margin-top: 20px; width: 300px;" placeholder="請(qǐng)輸入需要添加的值"></a-input>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const pageName = ref('')
</script>
<style scoped lang="less">
.main-test {
    font-size: large;
    color: red;
    font-weight: bold;
}
</style>

頁面 Page1 和頁面 Page2 組件的外層都加了一層 <keep-alive></keep-alive> 標(biāo)簽，這樣無論從頁面1切換到 2 還是2 切換到1 ，兩個(gè)組件內(nèi)的數(shù)據(jù)狀態(tài)都會(huì)得到緩存，不需要重新加載

借助 Include /Exclude 屬性條件緩存

KeepAlive 默認(rèn)緩存標(biāo)簽內(nèi)所有組件，提供 include 和 exclude 屬性可以實(shí)現(xiàn)條件緩存，支持逗號(hào)分隔、正則表達(dá)式，或者類型數(shù)組等三種形式

具體用法如下：

<!-- 逗號(hào)隔離的字符串，匹配 name 為 a 或 b 的組件  -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>
<!--正則表達(dá)式 ,匹配 name 不為 a 或 b 的組件-->
<KeepAlive :exclude="/a|b/">
  <component :is="view" />
</KeepAlive>
<!--數(shù)組 ，匹配 name 為 a 或 b 的組件 -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

上面屬性內(nèi)容匹配的都是組件的 name option ，當(dāng)組件需要被 keepAlive 條件緩存時(shí)，都需要指定組件的 name

vue2 中單文件組件指定 name 方式如下

<template>
 <div>
 </div>
</template>
<script>
export default {
  name: 'test'
}
</script>

vue3 中單文件組件 name 指定，自 3.2.34 以后版本自動(dòng)將文件的文件名指定為 name，移除了手動(dòng)聲明方式

max 指定最大緩存實(shí)例次數(shù)

<KeepAlive> 中通過指定 max 屬性來限制組件實(shí)例的最大緩存次數(shù)，當(dāng)緩存實(shí)例次數(shù)達(dá)到max 值，則將最少訪問實(shí)例銷毀為新示例創(chuàng)建預(yù)留空間

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

實(shí)例緩存的鉤子函數(shù)

被 KeepAlive 緩存的組件實(shí)例，當(dāng)組件掛載或銷毀時(shí)會(huì)分別觸發(fā) activated() 和 deactivated()鉤子函數(shù)，而不是 unmounted() 和 mounted()

如果要在實(shí)例掛載或銷毀時(shí)做一些操作，可以把相關(guān)邏輯寫入兩個(gè)鉤子函數(shù)里：

<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {
  // called on initial mount
  // and every time it is re-inserted from the cache
})
onDeactivated(() => {
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>