vue keep-alive页面缓存

keep-alive

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

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

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

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

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

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

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

3. include值为正则表达式

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

4. 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)//销毁定时器
	}
}