目录
一、KeepAlive的作用
二、缓存组件配置
2.1、过滤缓存组件
2.2、最大缓存实例数
三、KeepAlive组件的生命周期
四、错误用法
4.1、缓存v-if包裹的动态组件
4.2、拼写错误
一、KeepAlive组件的作用
首先，keep-alive是一个vue的内置组件，官网文档：vue.js - KeepAlive。我们在编写vue代码时，是可以直接<KeepAlive></KeepAlive>组件化调用的。
KeepAlive多用于切换tab页或跳转、改变页面时候，缓存旧页面，以达到使用浏览器后退或返回功能回到旧页面时候，依旧可以保留跳转前的页面值。
二、缓存组件配置
2.1、缓存过滤
在<KeepAlive></KeepAlive>中，被包裹的组件将会被缓存，默认缓存包裹的所有实例。当然可以根据事情情况选择特定选择实例进行缓存，这样也有助提供响应速度。
// include和exclude 其值可以是字符串，数组、正则表达式，除字符串外，其余类型得使用:include或:exclude<KeepAlive include="" exclude=""><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>2.2、最大缓存实例数
这块设置用来限制组件缓存的最大实例数，当缓存的实例数超过指定的最大缓存数后，vue自动将最久没有被访问的实例数的缓存删除，用来添加新的缓存实例。
// 使用prop :max指定<KeepAlive :max="20"><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>
三、KeepAlive组件的生命周期
activated 和 deactivated 生命周期可以用来处理一些回调逻辑。
四、错误用法
在使用KeepAlive时，有几个注意点，要不然会没有缓存效果。
4.1、缓存v-if包裹的动态组件
// 因为v-if会在dom中移除（KeepAlive会不起作用） -->
<template v-if="routeName === key"><KeepAlive><component :is="currentTab"/></KeepAlive>
</template>// 改用v-show
<KeepAlive><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>4.2、拼写错误
在template块里得使用KeepAlive，若使用keep-alive的话会不起作用，亲测。
