keep-alive

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种写法



切记！include配置的name，是组件的name，而不是router上的name！
切记！include配置的name，是组件的name，而不是router上的name！

也可以通过路由表中的mate属性 配置哪些需要缓存

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello,

      meta: {

        keepAlive: false // 不需要缓存

      }

    },
]
})

注意如果是动态路由使用　keep-alive 需要给　router-view 设置key值

动态路由大多是使用一个组件 只是数据不同 所以key值 直接设置自己的路由信息即可

同一个页面有时候被缓存，有时候不被缓存

结合vuex将需要缓存的页面进行管理
A列表->Bform表单（有个选择地址）->通过点击地址来到C，
C在这里选择完地址，返回->B（这个应该是刚才缓存的那个表单）->A
app.vue

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就行

bbbb

问题：

依次进入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