1、keep-alive作用：主要用于保留组件状态或避免重新渲染
（页面不重新渲染，接口也就没有重新调用，节省网络资源，提高性能）
keep-alive包裹动态组件，自身不会渲染一个 DOM 元素
常用属性
include 只有名称匹配的组件会被缓存。
exclude 任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
include 、exclude 允许组件有条件地缓存。3种写法
<keep-alive include="a,b">
<keep-alive :include="/a|b/">
<keep-alive :include="['a', 'b']">
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配路由中的name
2、keep-alive用法
在动态组件中的应用
<keep-alive :include="aaa" :exclude="bbb" :max="amount">
<component :is="currentComponent"></component>
</keep-alive>
在vue-router中的应用
<keep-alive :include="aaa" :exclude="bbb" :max="amount">
<router-view></router-view>
</keep-alive>
3、keep-alive相关钩子
activated 当keepalive包含的组件再次渲染的时候触发
deactived 当keepalive包含的组件销毁的时候触发
生命周期执行顺序：
（1）、不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
（2）、使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
（3）、使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated
activated 的使用场景。页面A是表单，有一项是地址，点击地址跳到详细地址B页面填写完回到A页面。A页面是缓存的。只需要修改A页面中的地址，使用activated函数接收、改写地址
4、使用keep-alive的场景：
（1）带筛选的查询列表A，点击筛选按钮跳详情，再跳回，想要保留A的筛选列表
（2）按步骤注册表单中的上一步、下一步需要缓存：
(3)form表单A，地址要跳到B页面详细填写，完事返回A页面，A页面需要缓存，地址需要局部更新
(4)浏览网页到中间部分，跳转到其他页面再次返回时还是之前位置
5、结合meta使用keep-alive
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>
</div>
路由中区分，组件是否需要被缓存
{
path: '/list',
name: 'List',
component: List,
meta: {
keepAlive: true // true需要被缓存 false不被缓存
}
}
6、同一个页面有时候被缓存，有时候不被缓存
结合vuex将需要缓存的页面进行管理
原理：
进入B存入store，由B到A，删除store
A => B 也需要删除store，是下面beforeEach说的情况
App代码
<keep-alive :include="cachePage">
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
</router-view>
注意：cachePage 不能用data定义，相当于只取了一次，死值
computed: {
cachePage () {
return this.$store.state.cachePage
}
},
知识点：
router.beforeEach 和 B页面中beforeRouteEnter 执行数序
先进入router.beforeEach，再进入beforeRouteEnter
beforeEach也是需要的，避免当form表单填完，进入C页面后，C=>A,A=>B
router.beforeEach((to, from, next) => {
if (to.name === 'userForm' && from.name === 'list') {
store.commit('delCachePage', 'userForm')
}
next()
})
B页面中
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 vm 访问组件实例
// 因为当钩子执行前，组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
// 从list => form 包括第一从list进，包括从form返回list，再从list进 ，都不要form有缓存
// 从editAddr => form 需要缓存
if (vm.$store.state.cachePage.indexOf('userForm') === -1) {
vm.$store.commit('addCachePage','userForm')
}
})
},
beforeRouteLeave (to, from, next) {
console.log('leave',to.name)
if(to.name === 'list'){
this.$store.commit('delCachePage','userForm')
}
next();
},
另外对于在beforeEach中使用to.meta.keepAlive = false的说法测试并不好用
