keep-alive

作用：缓存组件，减少重复渲染

参数：

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

说再多也没囵用,咱们直接举例子，亮代码，在此之前请你自己先提前动手创建两个组件

在项目中我们经常在做多页面标签管理的时候会用到 就是这玩意

这个时候我们就会想在切换页面的时候，回去原来页面的时候保持不变化,，这时候keep-alive 就当当当当当出场了，这里只介绍在vue3怎么用直接上代码：

  <router-view v-slot="{ Component }">
      <keep-alive :include="cachesViewList">
           <component :is="Component" />
      </keep-alive>
   </router-view>

cachesViewList 是组件实例name的数组

组件的实例name 就是这玩意

这样子就基本完成了

组件来回切换还能保持原来的数据

下面才是重点注意:

菜单多层级嵌套底下的子组件是不会缓存下来的，这个时候我们就要继续往下给下面的层级继续加上，还是这个   

<router-view v-slot="{ Component }" >
   <keep-alive  :include="cachesViewList">
     <component :is="Component" />
   </keep-alive>
</router-view>

同时cachesViewList 数组里面必须把它父级的name，反正就是把它冚家都放进去就ok了

cosnt cachesViewList = ['爷爷','爸爸','儿子'，'孙子']

如果你成功了，请给我点个赞，谢谢。