浅谈vue中的keep-alive

我们先来了解一下keep-alive的概念

1. <keep-alive>是vue的内置组件，可以使被包裹的组件保留状态，避免重新渲染
2. <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中
3. 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行,activated是在keep-alive组件激活时调用，deactivated是在keep-alive组件停用时调用
4. props:
   1. include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
   2. exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
   3. max - 数字。最多可以缓存多少组件实例。

具体用法

export default {
	name: keep-alive-test,
	data() {
		return {
			includeComponent: 'keep-alive-test'
		}
	}
}

<-- 缓存name为keep-alive-test的组件 -->
<keep-alive include="keep-alive-test">
	<component><component>
</keep-alive>

<-- 缓存name为a或者b的组件 -->
<keep-alive include="keep-alive-test">
	<component :is="view"><component>
</keep-alive>

<-- 缓存name为a或者b的组件,使用正则表达式，需使用v-bind -->
<keep-alive include="/a|b/">
	<component :is="view"><component>
</keep-alive>

<-- 动态判断 -->
<keep-alive :include="includeComponent">
	<reouter-view><reouter-view>
</keep-alive>

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

<-- 不缓存name为keep-alive-test组件 -->
<keep-alive exclude="keep-alive-test">
	<component><component>
</keep-alive>

activated和deactivated钩子函数，由于keep-alive包裹组件时，会缓存不活动的组件实例，而不是销毁它们，所以我们在路由切换时，缓存的组件是不会被销毁的，所以在destroyed中加入销毁事件是不会被执行的，这是就需要用到两个钩子函数

// keep-alive钩子函数，组件恢复时触发
activated() {
	window.addEventListener('scroll', this.scroll)
}
// keep-alive钩子函数，组件变为不可用时触发
deactivated() {
	window.removeEventListener('scroll', this.scroll)
}

activated和deactivated这两个钩子函数只有被keep-alive包裹才会被调用，在vue2.1.0 版本之后使用了exclude排除后，就算是被keep-alive包裹这两个钩子也不会调用，另外在服务端渲染时钩子函数也不会被调用。

页面首次进入被keep-alive包裹的组件时，钩子函数的触发顺序是created --> mounted – > actived – >deactivated，当之后在进入时，只会触发activated，离开触发deactivated

因为keep-alive回缓存数据，所以在第一次进入之后数据不会重新解析，而是直接读取内存中的数据。因此我们因该在activated中留一份数据获取的代码