keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素.
区别
不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据
使用 keep-alive 后 每次切换组件 只会在第一次触发组件 created 生命周期函数 并且 离开该组件时不会销毁该组件
keep-alive 的生命周期
1.初次进入时：created > mounted > activated；退出后触发 deactivated
2.再次进入：会触发 activated；
keep-alive 的参数
1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3.max - 数字。最多可以缓存多少组件实例。
include 、exclude 允许组件有条件地缓存。3种写法
<keep-alive include="a,b">
<keep-alive :include="/a|b/">
<keep-alive :include="['a', 'b']">
切记！include配置的name，是组件的name，而不是router上的name！
切记！include配置的name，是组件的name，而不是router上的name！
<keep-alive include ="组件的name">
</keep-alive>
也可以通过路由表中的mate属性 配置哪些需要缓存
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
]
})
<keep-alive >
<router-view v-if="this.$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"> </router-view>
注意如果是动态路由使用 keep-alive 需要给 router-view 设置key值
动态路由大多是使用一个组件 只是数据不同 所以key值 直接设置自己的路由信息即可
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
同一个页面有时候被缓存，有时候不被缓存
结合vuex将需要缓存的页面进行管理
A列表->Bform表单（有个选择地址）->通过点击地址来到C，
C在这里选择完地址，返回->B（这个应该是刚才缓存的那个表单）->A
app.vue
<keep-alive :include="cachePage">
<router-view> </router-view>
</keep-alive>
store.js
......
const state = {
cachePage: "",
};
const mutations = {
cachePageFun(state, val) {
state.cachePage = val;
},
......
a.vue
.......
this.$store.commit("cachePageFun", "bb");
this.$router.push("/b");
.....
b.vue
.......
name: "bb",
.......
goList() {
this.$store.commit("cachePageFun", "");
this.$router.push("/a");
}
.....
c.vue，正常跳转返回B就行
<router-link to="/b">bbbb</router-link>
问题：
<keep-alive include="A,B,C" :max="2">
依次进入A,B,C页面，缓存中是那 2 个页面
答：
keep-alive缓存类似队列效果，先进先出，依次进入A,B，此时缓存中是A,B，由于max=2，最多可以缓存 2 个组件实例，再次进入C时，将最先进入缓存的A，给踢出去，先进先出。
问题：被缓存的页面生命周期
答：
A,B均为首次进入：
进入页面A开始：
beforeCreate -> created -> beforeMount-> mounted-> activated
离开A去B时（销毁时）：
B: beforeCreate -> B: created -> B: beforeMount -> A: deactivated -> B: mounted -> B: activated
如果都不是首次进入：
从B进入页面A开始：B: deactivated -> A: activated
从A进入页面B开始：A: deactivated -> B: activated
