keepAlive搭配Vite插件（vite-plugin-vue-setup-extend）实现多个组件动态切换时缓存_vite keepalive

KeepAlive

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

通常我们用Vue.js实现页面的跳转往往需要借助<component :is="activeComponent" /> 加 <router-view v-slot="{ Component,route }">

但默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

可我们在实现页面跳转的是时候往往需要对跳转前的页面资源进行缓存，以便页面能在被“切走”的时候保留它们的状态，这时候就需要借助<KeepAlive>来实现。

<router-view v-slot="{ Component,route }">
     <keep-alive :include="keepAlive.list"> // include 的值是需要缓存的组件，exclude 的值是不需要被缓存的组件（这个值可以是字符串、正则表达式、或者是数组
         <component :is="Component" :key="route.fullPath" />
    </keep-alive>
</router-view>
1
2
3
4
5

组件名在Vue3中使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，可无需再手动声明，但开发过程中往往是需要用到自定义的 name 的，因此我们就需要一个方案来解决这个问题。

vite-plugin-vue-setup-extend

• 安装pnpm install vite-plugin-vue-setup-extend 或者 npm i vite-plugin-vue-setup-extend

• 配置

import setupExtend from 'vite-plugin-vue-setup-extend'

export default function createSetupExtend() {
    return setupExtend()
}
1
2
3
4
5

注意：这个只是vite-plugin-vue-setup-extend的配置记得将这个这个配置引入到vite.config.js中

• 使用

<script setup name="FriendsList">......</script>
1