可控制缓存销毁的 keepAlive 组件实现详解

这篇文章主要为大家介绍了可控制缓存销毁的 keepAlive 组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

简介

关于 Vue 的 KeepAlive

是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例

我们可以利用这一特性来解决当路由切换时页面组件被销毁的问题，常见的业务场景有表单缓存，列表缓存定位，返回时保持状态等，网上有很多教程涉及，但是对如何自主控制缓存的组件销毁这一块大多讲的不是很清晰。

本文会以初学者的角度出发，一步一步带你了解 keepAlive 的特性并实现一个可以自主控制什么时候销毁缓存页面的 keepAlive 组件 —— app-router-view

思路

在编写这一组件时我们的思路是先在路由配置中加入缓存标识，然后在组件里加上标签，然后通过缓存标识判断是否缓存该组件，为了操作缓存的销毁，我们会用到 include 属性，通过操作 include 里的组件名实现自主销毁组件，以下是具体实现步骤。

在 Routes 中添加 keepAlive 缓存标识

const routes = [ { path: '/index', name: 'index', component: () => import('@/views/index.vue'), meta: { title: '首页', keepAlive: false // 缓存标识 } } ]

创建 app-router-view 组件

这就是大家平时看教程比较常见的模式了，也能实现一些简单的需求，但还存在问题，就是当我们不需要缓存时候无法手动清除缓存，等会继续完善，这里先给大家简单介绍下的 v-slot 和标签里的 :is 是做什么的，这两个东西工作中并不常用，新同学可能比较陌生，这里也简单科普下。

router-view 中的 v-slot

简单说 v-slot 可以让我们方便的拿到路由标签包裹的组件和路由对象

主要用于方便我们使用和组件来包裹我们自己的组件

标签里的 :is

官网介绍是用于绑定动态组件，简单说就是可以让标签转化为我们指定的 vue 组件

实现手动清除页面缓存

这里简单说下思路，标签上有 include 属性，会接收一个数组，数组里的值是我们要缓存页面的组件名，我们可以通过操作 include 的值来手动销毁我们的缓存页面。

这里需要特别注意这个组件名，没有理解好这一块实践中就会出现各种奇奇怪怪的问题！！！

组件名指的是 vue 组件定义时的那个命名，同时我们 routes 里定义的 name 需要与之对应，否则找不到关系，以下图为例，默认情况下，我们 vue 的文件名就是我们最终引入的组件名，即 list-one 与 list-two 就是需要我们维护在 routes 中的名字

了解了这一点后我们来开始代码实现

定义组件名的方法

一般情况下我们可以通过文件名称来做组件名，但是很多时候我们会遇到文件名称一样的问题，这时候就需要我们自定义组件名了，这里推荐两种方法原生模式和插件模式

原生模式

插件模式

使用 vite-plugin-vue-setup-extend 插件扩展语法糖

// 安装插件 npm i unplugin-vue-components -D // 在页面 script setup 标签中定义 name

配置好路由 name 与组件 name 对应关系

{ 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 为例，创建 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 = [] } } })

添加路由守卫，在页面进入时维护缓存列表

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() }) }