快捷導(dǎo)航

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

更新時(shí)間：2022年10月14日 08:53:35 作者：我的代碼果然有問(wèn)題

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

簡(jiǎn)介

關(guān)于 Vue 的 KeepAlive

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

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

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

思路

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

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

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

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

router-view 中的 v-slot

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

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

標(biāo)簽里的 :is

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

實(shí)現(xiàn)手動(dòng)清除頁(yè)面緩存

這里簡(jiǎn)單說(shuō)下思路，<keep-alive> 標(biāo)簽上有 include 屬性，會(huì)接收一個(gè)數(shù)組，數(shù)組里的值是我們要緩存頁(yè)面的組件名，我們可以通過(guò)操作 include 的值來(lái)手動(dòng)銷毀我們的緩存頁(yè)面。

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

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

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

定義組件名的方法

一般情況下我們可以通過(guò)文件名稱來(lái)做組件名，但是很多時(shí)候我們會(huì)遇到文件名稱一樣的問(wèn)題，這時(shí)候就需要我們自定義組件名了，這里推薦兩種方法原生模式和插件模式

原生模式

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

插件模式

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

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

配置好路由 name 與組件 name 對(duì)應(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 模塊，通過(guò) 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)，在頁(yè)面進(jìn)入時(shí)維護(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)我們想要銷毀某個(gè)頁(yè)面，只要調(diào)用下 remove 方法移除 caches 里對(duì)應(yīng)的組件名，就可以銷毀該頁(yè)面的緩存了