vue keep-alive页面缓存

最新推荐文章于 2025-06-29 21:02:03 发布

原创最新推荐文章于 2025-06-29 21:02:03 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#缓存 #vue.js #javascript

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Vue中如何使用keep-alive组件来实现数据缓存，避免组件销毁导致的数据丢失。通过include属性可以指定需要缓存的组件，如News。同时，讲解了max属性限制缓存组件的数量。在缓存组件中，activated和deactivated钩子用于管理激活和失活时的状态，例如关闭定时器。此外，还展示了在切换组件时保持数据的例子。

keep-alive

我们知道，在切换组件的时候，组件也在不断的销毁和重建，而组件只要销毁数据就会清空，但有些特殊情况下，我想要对组件的数据进行缓存，这时我们就要用到keep-alive
keep-alive有三个props：

1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2. exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3. max - 数字。最多可以缓存多少组件实例。

用法：
1.keep-alive直接包裹router-view表示所有的路由组件都会被缓存，即不会被销毁,不推荐！
2.include指定需要缓存的页面，推荐

include值为字符串缓存单个指定页面，字符串的值是被指定组件的组件名

 <keep-alive include="News">
 	<router-view></router-view>
 </keep-alive>

include值为数组：缓存多个指定页面（也可以用逗号分割：include=‘News,Message’）

 <keep-alive :include="['News','Message']">
 	<router-view></router-view>
 </keep-alive>

include值为正则表达式

 <keep-alive :include="/a|b/">
 	<router-view></router-view>
 </keep-alive>

max值为数字

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

举个栗子：
下面这个功能，我们想要切换到message组件再切回到news组件的时候，之前再news组件中填写的内容依然存在

在路由出口：router-view的外层包裹keep-alive标签，指定要缓存的组件名

 <keep-alive include="News">
 	<router-view></router-view>
 </keep-alive>

//html
<template>
	<div>
		<News/>
		<Message/>
	</div>
</template>

import News from "./News.vue"
import Message from "./Message.vue"

export default {
	compontent:{
		News,
		Message
	}
	data:{ return {} }
}

这里的include="News"指的是News组件的组件名
在这里插入图片描述
注意：当我们使用了keep-alive缓存了某些组件，被缓存的组件就不会被销毁和重建，所以在此组建中mounted和created只会在组件第一次被加载时执行一次而beforeDestroy则不会执行，如果这时候我们在组件中使用了定时器，那就没办法在组件销毁时销毁定时器，这样会耗费性能，这时vue就提供了两个新的声明钩子函数：
activated（组件被激活时触发）和 deactivated （组件失活即切走时触发）
在被缓存的组件中使用定时器：

 export default {
	data:{ return {timer:null} },
	activated(){
		this.timer = setInterval(()=>{
			console.log("开启定时器")
		},500)
	},
	deactivated(){
		clearInterval(this.timer)//销毁定时器
	}
}