Vue3 中的 keep-alive 用法与 Vue2 中的稍显不同

router 配置缓存

第一步：配置 App.vue

Vue2.x 与 Vue3.0 的 App.vue 配置有差异，在 App.vue 配置信息如下：

Vue2.x 中，router-view 可整个放入 keep-alive 中，如下：

<template>
	<!-- vue2.x配置 -->
	<keep-alive>
		<router-view v-if="$route.meta.keepAlive"/>
	</keep-alive>
	<router-view v-if="!$route.meta.keepAlive"/>
</template>

Vue3.0 的 App.vue 配置方法如下：

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

这里 component 是 vue 中的特殊组件，:is 是用来绑定指定组件，这里是与路由对应的页面绑定。

第二步：添加 meta 属性

在对应的路由上添加meta属性来设置页面是否要使用缓存，如下：

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

到此即可实现页面的简单缓存，但是有些场景需要做复杂处理，比如说页面部分信息不需要读缓存，每次进入都需要进行处理，这个时候我们就可以使用 activated 生命周期来解决页面部分刷新问题。

实现页面部分刷新

先了解 vue 的生命周期，被 keepAlive 包裹的组件和页面，页面进入时执行的生命周期为：created->mounted->activated;

其中 created->mounted 是页面第一次进入才会执行，activated 生命周期在页面每次进入都会执行，特属于 keepAlive 的一个生命周期，所以我们把页面每次进来要进行的操作放入该生命周期即可。

如下代码：

activated() {
   // 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';
},

实现的功能是用户每次进入将动态验证码设为空，实现此功能也可以用其他方式，比如说将该组件放缓存外。

动态设置路由 keepAlive 属性