一般结合路由和动态组件一起使用，keep-alive 是内置的一个组件，可以实现组件缓存，不会重走生命周期函数，

切换时不会对当前组件进行卸载

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

一：基本用法

1：属性，允许组件有条件的进行缓存

includes：=>只有匹配的组件会被缓存 (字符串、数组、正则表达式)

exclude：=>任何匹配的组件都不会被缓存(字符串、数组、正则表达式)

max：=>缓存组件的最大值(类型为字符或者数字、控制缓存组件的个数)

2：exclude 的优先级比 include 高

3：两个钩子函数 activated(激活时触发) 和deactivated（移除时触发）

首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated

再次进入组件时：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

<keep-alive>  <component :is="view"></component></keep-alive><!-- 字符串方式 --><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>

二：使用场景

某些场景下不需要让页面重新加载

使用 meta 属性，在路由中配置keepAlive设置是否缓存

      {       path:'list',       name:'itemList',// 列表页       component(resolve){require(['@/pages/item/list'], resolve)},       meta:{keepAlive:true,title:'列表页'}}          <keep-alive>        <!-- 需要缓存的视图组件 -->        <router-view v-if="$route.meta.keepAlive"></router-view>     </keep-alive>      <!-- 不需要缓存的视图组件 -->     <router-view v-if="!$route.meta.keepAlive"></router-view>

三：缓存后如何更新数据

1：beforeRouteEnter：组件渲染会进入

beforeRouteEnter(to, from, next){    next(vm=>{        console.log(vm)        // 每次进入路由执行        vm.getData()  // 获取数据    })},

2：actived：在被激活，会执行actived钩子

// 注意：服务器端渲染期间avtived不被调用activated(){  this.getData() // 获取数据},

3:deactivated,失活情况

deactivated(){}

四：版本区别

1：vue3在路由使用中需要用到插槽来进行，组件内使用无变化

      <roter-view v-slot="{Component}">
      </roter-view>

五：注意点

1：先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称

2： 不会在函数式组件中正常工作，没有缓存实例

3：当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高

4：包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated