keep-alive的理解

核心概念

keep-alive是vue的一个内置组件，用于缓存不活动的组件实例。当切换组件时，它的状态会被保留在内存中，避免重复渲染，提升性能 下面是一个快速了解 keep-alive的表格：

关键原理

keep-alive通过维护一个缓存对象（vue2中使用普通对象，vue3使用Map）和一个键数组（vue2使用数组，vue3使用Set）来工作 被包裹的组件切换时，vue会检查名称是否匹配include和exclude，如果匹配缓存条件，组件实例会被存入缓存，否则销毁。当命中缓存时，实例直接从缓存中复用

max属性也很重要，大量缓存会造成内存的压力，设置max，确定最大缓存数量，缓存实例超过上限时，最久未被访问的实例会被销毁

实践应用

基本用法：

1. 缓存动态组件 使用component组件配合is属性进行动态切换时，用keep-alive包裹实现缓存

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

2. 缓存路由组件 结合vue-router的router-view使用

	<template>
	  <keep-alive>
	    <router-view></router-view>
	  </keep-alive>
	</template>

3. 条件缓存（include/exclude） 精确控制哪些组件需要缓存或不需要缓存。组件必须设置name

	<keep-alive :include="['Home', 'About']" :exclude=" /^Temp/" :max="5">
	  <component :is="currentView"></component>
	</keep-alive>

4. 在vue router中按路由缓存 meta定义是否需要缓存

	// router.js (Vue Router 4)
	const routes = [
	  {
	    path: '/list',
	    name: 'ListPage',
	    component: () => import('./ListPage.vue'),
	    meta: { keepAlive: true } // 需要缓存
	  },
	  {
	    path: '/detail/:id',
	    name: 'DetailPage',
	    component: () => import('./DetailPage.vue'),
	    meta: { keepAlive: false } // 不需要缓存
	  }
	];

在根组件（如 App.vue）中根据路由的 meta.keepAlive条件渲染：

	<template>
	  <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>

keep-alive生命周期变化

• 首次进入组件​：beforeCreate-> created-> beforeMount-> mounted-> activated
• 再次进入（激活）​​：activated
• 离开（失活）​​：deactivated

​注意​：传统的 mounted等钩子在首次加载后再次切换回来时不会再次触发。因此，如果需要数据刷新，应将逻辑放在 activated钩子中

vue3中是注册onActivated和 onDeactivated函数来

	<script setup>
		import { onActivated, onDeactivated } from 'vue';
		
		onActivated(() => {
		  // 组件被激活时执行，例如重新请求数据
		  console.log('Component activated');
		});
		
		onDeactivated(() => {
		  // 组件被缓存时执行，例如清除定时器或取消请求
		  console.log('Component deactivated');
	});
	</script>

常见问题

1. 组件必须具名
2. 合理控制缓存数量
3. 及时清理资源
4. 何时使用keep-alive

图表