Vue中KeepAlive內置緩存使用詳解

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

KeepAlive 是 vue 中的內置組件，當多個組件動態(tài)切換時可以對實例狀態(tài)進行緩存，本文就來詳細的介紹一下Vue中KeepAlive內置緩存使用，感興趣的可以了解一下

KeepAlive 介紹及使用場景

KeepAlive 是 vue 中的內置組件，當多個組件動態(tài)切換時可以對實例狀態(tài)進行緩存，用法如下

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

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

KeepAlive 使用實例

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

頁面1 是一個計數(shù)器，加一減一，默認初始值為 0；點擊按鈕 頁面2 ，會跳轉一個含有輸入框的頁面，輸入框默認為空；

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

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

<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;">
        當前值為{{ 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="請輸入需要添加的值"></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> 標簽，這樣無論從頁面1切換到 2 還是2 切換到1 ，兩個組件內的數(shù)據(jù)狀態(tài)都會得到緩存，不需要重新加載

借助 Include /Exclude 屬性條件緩存

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

具體用法如下：

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

上面屬性內容匹配的都是組件的 name option ，當組件需要被 keepAlive 條件緩存時，都需要指定組件的 name

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

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

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

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

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

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

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

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

如果要在實例掛載或銷毀時做一些操作，可以把相關邏輯寫入兩個鉤子函數(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>