啥是KeepAlive
keep-alive：vue内置组件，缓存不活动的组件实例，而不是进行销毁
简单理解
在切换组件时，可以保存一些组件不被销毁，防止对其进行多次渲染。 缓存组件，用来达到提升性能的目的。他自身不会渲染一个Dom元素,也不会出现在组件的父组件链中。 当组件在keep-alive中被调用时，它所处的mounted 和 unmounted 生命周期函数不会被调用，取而代之的是 activated 和 decativated 。
KeepAlive属性
1. include: 可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存
2. exclude: 可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存
3. max: 可传数字，限制缓存组件的最大数量,默认为10
属性的使用方法
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时 Vue 为我们解决了这个问题 被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：
- activated 当 keepalive 包含的组件再次渲染的时候触发
- deactivated 当 keepalive 包含的组件销毁的时候触发
keepalive是一个抽象的组件，缓存的组件不会被mounted为此提供activated和deactivated钩子函数
