keep-alive的理解

核心概念

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

特性维度 说明
功能 缓存非活跃组件实例,避免重复销毁和创建,保持组件状态(如数据、滚动位置)
核心属性 include:指定缓存的组件名(字符串、正则、数组) exclude:指定不缓存的组件名 max:最大缓存实例数(采用LRU算法)
生命周期钩子 activated:组件被激活(从缓存中恢复)时触发 deactivated:组件被停用(进入缓存)时触发
常见应用场景 表单页保留用户输入 列表页保持滚动位置和过滤条件 Tab页切换 路由组件缓存(需结合Vue Router)
注意事项 组件需具名(name选项)以便 include/exclude匹配 注意及时清理非响应式资源(如定时器、事件监听)防止内存泄漏 合理使用 max控制缓存量

关键原理

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

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

实践应用

基本用法:

  1. 缓存动态组件 使用component组件配合is属性进行动态切换时,用keep-alive包裹实现缓存
vue 复制代码
	<template>
	  <keep-alive>
	    <component :is="currentComponent"></component>
	  </keep-alive>
	</template>
  1. 缓存路由组件 结合vue-router的router-view使用
vue 复制代码
	<template>
	  <keep-alive>
	    <router-view></router-view>
	  </keep-alive>
	</template>
  1. 条件缓存(include/exclude) 精确控制哪些组件需要缓存或不需要缓存。组件必须设置name
vue 复制代码
	<keep-alive :include="['Home', 'About']" :exclude=" /^Temp/" :max="5">
	  <component :is="currentView"></component>
	</keep-alive>
  1. 在vue router中按路由缓存 meta定义是否需要缓存
js 复制代码
	// 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条件渲染:

vue 复制代码
	<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中是注册onActivatedonDeactivated函数来

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

常见问题

  1. 组件必须具名
  2. 合理控制缓存数量
  3. 及时清理资源
  4. 何时使用keep-alive
推荐使用 ✅ 不建议使用 ❌ 注意事项
表单页跳转后返回需保留数据 静态内容展示 结合路由 meta 标记
长列表滚动位置恢复 - 配置路由的滚动行为
高频切换的 Tab 页 - 设置 max 防内存溢出
需要保持组件状态以避免重复渲染和请求的复杂页面 组件内容总是实时更新,无需保持状态的页面 activated中处理需要更新的逻辑

图表

相关推荐
小白呀白2 分钟前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
吃饺子不吃馅25 分钟前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔1 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~1 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天1 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚2 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
武昌库里写JAVA2 小时前
SpringCloud与微服务
vue.js·spring boot·sql·layui·课程设计
正义的大古2 小时前
OpenLayers地图交互 -- 章节九:拖拽框交互详解
前端·vue.js·openlayers
三十_A2 小时前
【实录】使用 Verdaccio 从零搭建私有 npm 仓库(含完整步骤及避坑指南)
前端·npm·node.js
huangql5202 小时前
从零到一打造前端内存监控 SDK,并发布到 npm ——基于 TypeScript + Vite + ECharts的解决方案
前端·typescript·echarts