Vue3中的keep-alive可以用于优化组件渲染的性能。例如，在一个页面中，有一些组件不需要每次访问时都重新渲染，可以使用keep-alive将这些组件缓存起来，只在第一次或数据变化时渲染更新。这样做可以减少组件的重复渲染，提高页面的响应速度。同时，keep-alive也可以用于处理一些需要缓存的数据，例如用户登录状态等。
  本文主要介绍Vue3中keep-alive的使用。

属性详解

• include：缓存的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
• exclude：排除的组件(可以是字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
• max：缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

1. 当组件名被include和exclude同时绑定时，exclude优先与include
2. 缓存组件数大于max时，删除第一个被缓存的组件。
3. include和exclude传 数组 情况居多

  官网范例：

<template>
	<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
	<keep-alive include="a,b">
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
	<keep-alive exclude="c"> 
	  	<component :is="view"></component>
	</keep-alive>
	
	<!-- 使用正则表达式，需使用v-bind -->
	<keep-alive :include="/a|b/">
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 动态判断 -->
	<keep-alive :include="includedComponents">
		<router-view></router-view>
	</keep-alive>
	
	<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
	<keep-alive include="a,b" exclude="b"> 
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个被缓存的组件 -->
	<keep-alive exclude="c" max="5"> 
	  <component></component>
	</keep-alive>
</template>

<script>
	import { ref,computed } from 'vue'
	import A from './A.vue'
	import B from './B.vue'
	import C from './C.vue'

	const view = ref('A')
	const includedComponents = computed(() => {
		return view.value
	})
</script>

  动态组件要先注册再使用，且与keep-alive一起使用时先匹配view值对应组件名的组件再做缓存判断

基本用法

1、组件配置使用

  示例代码：

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive exclude='Home'>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

2、路由配置使用

  示例代码：
  在路由表中的meta属性中添加自定义信息keepAlive，true为缓存，反之不缓存。

const routes = [
	{
	  path: '/home',
	  name: 'Home',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/Home.vue')
	},
	{ 
	  path: '/About',
	  name: 'About',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/About.vue')
	}
]

  App.vue

<template>
	<div id="nav">
		<button @click='jumpHome'>home</button>
	    <button @click='jumpAbout'>about</button>
	</div>
  	<keep-alive>
    	<router-view v-if="route.meta.keepAlive"></router-view>
	</keep-alive>
	<router-view v-if="!route.meta.keepAlive"></router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter,useRoute } from 'vue-router'
	
	const route = useRoute()
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

  实际开发中，我们可以结合路由守卫来实现需要缓存组件的缓存。
  补充 App.vue：

<script setup>
	import { beforeRouteLeave } from 'vue-router'
	
	beforeRouteLeave(to, from, next) {
	    to.meta.keepAlive = true;
	    next();
 		}
	}
</script>

注意

• 1、include和keepAlive只能使用一个，不能混合使用。
• 2、如果要缓存，最好在keep-alive外加个div标签。根标签不该是router-view，不然会白屏。
• 3、keep-alive不支持缓存孙子组件。若想缓存孙子组件，可以将整个子组件缓存，或者在子组件里再使用keepalive。
• 4、一定要给组件加上name。使用setup语法糖的可以<script setup>和<script>一起用，请看上述代码。