应用场景

有时候我们不希望组件被重新渲染影响使用体验；
或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。
这时候就可以用到keep-alive组件

<keep-alive>
      <component> </component>
</keep-alive>

区别

不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据
使用 keep-alive 后 每次切换组件 只会在第一次触发组件 created 生命周期函数 并且 离开该组件时不会销毁该组件

keep-alive 的生命周期

1.初次进入时：created > mounted > activated；退出后触发 deactivated
2.再次进入：会触发 activated；

keep-alive 的参数

1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3.max - 数字。最多可以缓存多少组件实例。

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