keep-alive 介绍及使用问题：多次使用同一组件，数据不更新_vue3.0 keepalive setup执行了多次-优快云博客

本文链接：https://blog.youkuaiyun.com/HockJerry/article/details/116597818

本文详细介绍了Vue中Keep-Alive组件的功能及其使用方法，包括如何通过配置参数实现组件缓存，避免重复加载和数据请求，提升用户体验。同时探讨了在实际应用中可能遇到的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

keep-alive是vue官方自带的组件标签，多结合router-view来使用

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

功能介绍
在使用this.$router.push()跳转路由加载组件时，一般情况每次组件都会再次加载，如果组件内有请求也会再次去请求数据，就会造成不必要的请求，影响用户体验；
而keep-alive可以缓存组件，及其中的数据，使再次跳转该路由时其中的组件和数据不会再次请求，大大的提高的页面体验
基本属性简介

//	标签上的两个属性
<keep-alive :include="aliveMenus" :exclude="reMenus" max="10">
	<router-view></router-view>
</keep-alive>

//	include: 缓存其中的组件,可以在路由发生变化时添加或者减少
//	例：[
//		{ name: 'a', path: '/a', meta: {}, query: {}, params: {} },
//		{ name: 'b', path: '/b', meta: {}, query: {}, params: {} }
//	  ]
//	exclude: 不缓存其中的的组件
//	max: 最多可以缓存组件的个数

生命周期简介
keep-alive会使包裹的组件新增两个生命周期：
activated：缓存组件激活时触发
执行顺序：首次进入created>mounted>activated，二次进入就只会触发activated
deactivated：缓存组件失活时触发

使用问题
在项目中会遇到这么一个场景：
一个列表显示几个数据，会有一个面包屑记录并显示打开过的组件。例如在列表中选择一条信息查看详情就会打开具体的详情页面。
在这里插入图片描述

现在，选择一条列表查看详情打开了一个页面，面包屑加了一个记录。再次回到列表点击另一个查看详情，又会打开另一个详情页面。但是这两个页面所用的组件是同一个，但是在第一次使用时就被缓存了，这时候你新打开的详情页面就是上次的数据，并未更新。

解决方法：

// 1.通过监听路由变化，在watch中监听'$route'
watch: {
	'$route'(to, from) {
		// 这里的形参to和from与路由拦截的形参是一样的
	}
}
// 2.通过路由钩子，beforeUpdate
beforeUpdate (to, from, next) {
	// 这里的形参to和from,next与路由拦截的形参是一样的,记住完成操作一定要执行next()才能完成跳转
}