快捷導(dǎo)航

可控制緩存銷毀的?keepAlive?組件實(shí)現(xiàn)詳解

更新時間：2022年10月14日 08:53:35 作者：我的代碼果然有問題

這篇文章主要為大家介紹了可控制緩存銷毀的?keepAlive?組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

簡介

關(guān)于 Vue 的 KeepAlive

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

我們可以利用這一特性來解決當(dāng)路由切換時頁面組件被銷毀的問題，常見的業(yè)務(wù)場景有表單緩存，列表緩存定位，返回時保持狀態(tài)等，網(wǎng)上有很多教程涉及，但是對如何自主控制緩存的組件銷毀這一塊大多講的不是很清晰。

本文會以初學(xué)者的角度出發(fā)，一步一步帶你了解 keepAlive 的特性并實(shí)現(xiàn)一個可以自主控制什么時候銷毀緩存頁面的 keepAlive 組件 —— app-router-view

思路

在編寫這一組件時我們的思路是先在路由配置中加入緩存標(biāo)識，然后在<router-view> 組件里加上<KeepAlive>標(biāo)簽，然后通過緩存標(biāo)識判斷是否緩存該組件，為了操作緩存的銷毀，我們會用到 include 屬性，通過操作 include 里的組件名實(shí)現(xiàn)自主銷毀組件，以下是具體實(shí)現(xiàn)步驟。

在 Routes 中添加 keepAlive 緩存標(biāo)識

const routes = [
    {
        path: '/index',
        name: 'index',
        component: () => import('@/views/index.vue'),
        meta: {
            title: '首頁',
            keepAlive: false // 緩存標(biāo)識
        }
    }
]

創(chuàng)建 app-router-view 組件

<template>
    <router-view v-slot="{ Component, route }">
        <keep-alive>
            <component :is="Component" v-if="route.meta.keepAlive"/>
        </keep-alive>
        <component :is="Component" v-if="!route.meta.keepAlive"/>
    </router-view>
</template>

這就是大家平時看教程比較常見的模式了，也能實(shí)現(xiàn)一些簡單的需求，但還存在問題，就是當(dāng)我們不需要緩存時候無法手動清除緩存，等會繼續(xù)完善，這里先給大家簡單介紹下<router-view> 的 v-slot 和標(biāo)簽里的 :is 是做什么的，這兩個東西工作中并不常用，新同學(xué)可能比較陌生，這里也簡單科普下。

router-view 中的 v-slot

簡單說 v-slot 可以讓我們方便的拿到路由標(biāo)簽包裹的組件和路由對象

主要用于方便我們使用 <transition> 和 <keep-alive> 組件來包裹我們自己的組件

標(biāo)簽里的 :is

官網(wǎng)介紹是用于綁定動態(tài)組件，簡單說就是可以讓標(biāo)簽轉(zhuǎn)化為我們指定的 vue 組件

實(shí)現(xiàn)手動清除頁面緩存

這里簡單說下思路，<keep-alive> 標(biāo)簽上有 include 屬性，會接收一個數(shù)組，數(shù)組里的值是我們要緩存頁面的組件名，我們可以通過操作 include 的值來手動銷毀我們的緩存頁面。

這里需要特別注意這個組件名，沒有理解好這一塊實(shí)踐中就會出現(xiàn)各種奇奇怪怪的問題！?。?/p>

組件名指的是 vue 組件定義時的那個命名，同時我們 routes 里定義的 name 需要與之對應(yīng)，否則找不到關(guān)系，以下圖為例，默認(rèn)情況下，我們 vue 的文件名就是我們最終引入的組件名，即 list-one 與 list-two 就是需要我們維護(hù)在 routes 中的名字

了解了這一點(diǎn)后我們來開始代碼實(shí)現(xiàn)

定義組件名的方法

一般情況下我們可以通過文件名稱來做組件名，但是很多時候我們會遇到文件名稱一樣的問題，這時候就需要我們自定義組件名了，這里推薦兩種方法原生模式和插件模式

原生模式

<script> 
export default { 
    name: 'component-name' // 你的組件名 
} 
</script>

插件模式

使用 vite-plugin-vue-setup-extend 插件擴(kuò)展語法糖

// 安裝插件
npm i unplugin-vue-components -D     
// 在頁面 script setup 標(biāo)簽中定義 name
<script setup name="component-name">
// This starter template is using Vue 3 <script setup> SFCs
// ...
</script>

配置好路由 name 與組件 name 對應(yīng)關(guān)系

{
    path: '/list-one',
    name: 'list-one',
    component: () => import('@/views/list-one.vue'),
    meta: {
        title: '列表 1',
        keepAlive: false
    }
},
{
    path: '/list-two',
    name: 'list-two',
    component: () => import('@/views/list-two.vue'),
    meta: {
        title: '列表 2',
        keepAlive: true
    }
}

在 pinia 或者 vuex 中定義好操作緩存列表的方法

我這里以 pinia 為例，創(chuàng)建 useKeepAliverStore 模塊，通過 add , 與 remove 操作緩存列表

/**
 * @description: 緩存控制
 */
 export const useKeepAliverStore = defineStore('keepAliver', {
    state: () => ({
        caches: []
    }),
    getters: {},
    actions: {
        add(name) {
            if (!this.caches.includes(name)) {
                this.caches.push(name)
            }
        },
        remove(name) {
            this.caches = this.caches.filter((item) => item !== name)
        },
        clear() {
            this.caches = []
        }
    }
})

添加路由守衛(wèi)，在頁面進(jìn)入時維護(hù)緩存列表

import { useKeepAliverStore } from '@/store/modules/keepAliver'
export function setupKeepAliver(router) {
    router.beforeEach((to, from, next) => {
        if (to.meta.keepAlive) {
            console.log('keepAliver')
            const { add } = useKeepAliverStore()
            add(to.name)
        }
        next()
    })
}

調(diào)整組件，維護(hù)好 include

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
import { useKeepAliverStore } from '@/store/modules/keepAliver'
const { caches } = storeToRefs(useKeepAliverStore())
</script>
<template>
    <router-view v-slot="{ Component, route }">
        <keep-alive :include="caches">
            <component
                :is="Component"
                v-if="route.meta.keepAlive"
                :key="route.name"
            />
        </keep-alive>
        <component
            :is="Component"
            v-if="!route.meta.keepAlive"
            :key="route.name"
        />
    </router-view>
</template>

這樣就大功告成啦，當(dāng)我們想要銷毀某個頁面，只要調(diào)用下 remove 方法移除 caches 里對應(yīng)的組件名，就可以銷毀該頁面的緩存了