详细分析KeepAlive的基本知识并缓存路由（附Demo）

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

基本知识推荐阅读：KeepAlive知识点

从实战中学习，源自实战中vue路由的缓存设置

<router-view v-if="routerAlive"><template #default="{ Component, route }"><keep-alive :include="getCaches"><component :is="Component" :key="route.fullPath" /></keep-alive></template>
</router-view>

截图如下：

在这里插入图片描述

1. 基本知识

<KeepAlive> 内置组件，用于缓存动态组件或路由组件，以提高性能
可以保留组件的状态，避免重复渲染和生命周期钩子的重新调用

KeepAlive 作用

缓存组件，提高性能，避免组件反复销毁和创建
保留组件的状态，例如表单填写内容、滚动位置等
控制缓存，可以指定哪些组件需要被缓存，哪些不需要

KeepAlive 适用场景

需要缓存的多页面表单
列表详情页切换时，保留列表的滚动位置
复杂组件切换时，避免重新渲染带来的性能开销

功能	说明
KeepAlive	用于缓存组件，提高性能
include	指定要缓存的组件（支持字符串或数组）
exclude	指定不缓存的组件
max	限制最大缓存组件数量
activated()	组件被激活时触发
deactivated()	组件被缓存时触发

include 和 exclude
可以通过 include 和 exclude 来决定哪些组件需要被缓存，哪些不需要

<keep-alive include="ComponentA"><component :is="currentComponent"></component>
</keep-alive>

只有 ComponentA 会被缓存，而 ComponentB 不会

或者：

<keep-alive :include="['ComponentA', 'ComponentC']"><component :is="currentComponent"></component>
</keep-alive>

只有 ComponentA 和 ComponentC 会被缓存
如果需要排除某个组件：

<keep-alive exclude="ComponentB"><component :is="currentComponent"></component>
</keep-alive>

ComponentB 不会被缓存，而其他组件都会被缓存

max —— 设置缓存组件的最大数量
如果缓存的组件较多，可以设置 max 限制最多缓存多少个组件
只缓存最近的两个组件，超出的组件会被销毁

<keep-alive :max="2"><component :is="currentComponent"></component>
</keep-alive>

KeepAlive 生命周期钩子
Vue 提供了两个专门用于 KeepAlive 组件的生命周期钩子：
activated()：组件被激活（切换到缓存中的组件时调用）
deactivated()：组件被缓存（切换到另一个组件时调用）

<script>
export default {created() {console.log("组件创建");},activated() {console.log("组件被激活");},deactivated() {console.log("组件被缓存");},destroyed() {console.log("组件被销毁");},
};
</script>

运行效果：

组件首次渲染时，created() 会触发
当组件切换回来时，activated() 会触发，而不会重新执行 created()
切换到别的组件时，deactivated() 触发，而不会执行 destroyed()
只有当缓存被清除时，才会执行 destroyed()

2. Demo

2.1 基本

动态组件缓存

<template><div><button @click="currentComponent = 'ComponentA'">切换到A</button><button @click="currentComponent = 'ComponentB'">切换到B</button><keep-alive><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import ComponentA from "./ComponentA.vue";
import ComponentB from "./ComponentB.vue";export default {data() {return {currentComponent: "ComponentA",};},components: {ComponentA,ComponentB,},
};
</script>

组件 A (ComponentA.vue)：

<template><div><h3>组件 A</h3><input v-model="text" placeholder="输入内容会被缓存" /></div>
</template><script>
export default {data() {return {text: "",};},created() {console.log("ComponentA 创建");},destroyed() {console.log("ComponentA 被销毁");},
};
</script>

组件 B (ComponentB.vue)：

<template><div><h3>组件 B</h3></div>
</template><script>
export default {created() {console.log("ComponentB 创建");},destroyed() {console.log("ComponentB 被销毁");},
};
</script>

一个最明显的变化就是：
在 ComponentA 中输入一些文字，然后切换到 ComponentB，再切回来，发现输入内容还在（ComponentA 没有被销毁）

2.2 拓展

KeepAlive 也可以与 Vue Router 结合，缓存路由组件
这样在 PageA 和 PageB 之间切换时，PageA 不会被销毁，而是会被缓存

<template><div><router-link to="/pageA">页面 A</router-link><router-link to="/pageB">页面 B</router-link><keep-alive><router-view></router-view></keep-alive></div>
</template>

路由配置：

import { createRouter, createWebHistory } from "vue-router";
import PageA from "./PageA.vue";
import PageB from "./PageB.vue";const routes = [{ path: "/pageA", component: PageA },{ path: "/pageB", component: PageB },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

2.3 终极

这也是实战中常用的一种方式，从实战中抽离出基本的Demo，以 Vue 3 + Vue Router 4 + Pinia

装依赖：npm install vue-router@4 pinia

main.ts（应用入口）

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Profile from './views/Profile.vue'const pinia = createPinia()// 定义路由
const routes = [{ path: '/', component: Home, name: 'Home' },{ path: '/about', component: About, name: 'About' },{ path: '/profile', component: Profile, name: 'Profile' }
]const router = createRouter({history: createWebHistory(),routes
})const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')

store/tagsView.ts（Pinia 状态管理 - 维护缓存组件列表）

import { defineStore } from 'pinia'export const useTagsViewStore = defineStore('tagsView', {state: () => ({cachedViews: new Set<string>()}),getters: {getCachedViews(): string[] {return Array.from(this.cachedViews)}},actions: {addCachedView(name: string) {this.cachedViews.add(name)},removeCachedView(name: string) {this.cachedViews.delete(name)},clearCachedViews() {this.cachedViews.clear()}}
})

App.vue（KeepAlive 组件封装）

<script setup lang="ts">
import { computed, ref, provide, nextTick } from 'vue'
import { useTagsViewStore } from './store/tagsView'
import { RouterView } from 'vue-router'const tagsViewStore = useTagsViewStore()
const getCaches = computed(() => tagsViewStore.getCachedViews)// 无感刷新功能
const routerAlive = ref(true)
const reload = () => {routerAlive.value = falsenextTick(() => (routerAlive.value = true))
}
provide('reload', reload)
</script><template><div><router-view v-if="routerAlive"><template #default="{ Component, route }"><keep-alive :include="getCaches"><component :is="Component" :key="route.fullPath" /></keep-alive></template></router-view></div>
</template>

views/Home.vue

<script setup lang="ts">
import { inject } from 'vue'const reload = inject('reload') as () => void
</script><template><div><h1>Home Page</h1><button @click="reload">刷新当前组件</button></div>
</template>

views/About.vue

<template><div><h1>About Page</h1></div>
</template>

views/Profile.vue

<template><div><h1>Profile Page</h1></div>
</template>

动态路由的常用操作

动态添加路由
在 router.ts 中可以动态添加路由：

import router from './router'const newRoute = {path: '/new-page',component: () => import('@/views/NewPage.vue'),name: 'NewPage'
}router.addRoute(newRoute)

动态移除路由：router.removeRoute('NewPage')
监听路由变化

import { useRoute, useRouter } from 'vue-router'
import { watch } from 'vue'const route = useRoute()
const router = useRouter()watch(() => route.fullPath, (newPath) => {console.log('路由发生变化:', newPath)
})

3. 实战

以ruoyi-vue-pro实战的Demo进行讲解，源码：芋道源码/ruoyi-vue-pro

具体KeepAlive，其文件在App.vue中

<router-view v-if="routerAlive"><template #default="{ Component, route }"><keep-alive :include="getCaches"><component :is="Component" :key="route.fullPath" /></keep-alive></template>
</router-view>

通过组件的设置是否路由进行缓存，后续获取到这个路由信息时，对应判定是否该路由有缓存信息

const getCaches = computed((): string[] => {const caches = tagsViewStore.getCachedViewsconsole.log('当前缓存的组件:', caches) // 打印缓存的组件名称return caches
})const tagsView = computed(() => appStore.getTagsView)//region 无感刷新
const routerAlive = ref(true)
// 无感刷新，防止出现页面闪烁白屏
const reload = () => {routerAlive.value = falsenextTick(() => (routerAlive.value = true))
}
// 为组件后代提供刷新方法
provide('reload', reload)