vue中的keep-alive缓存组件

问题

我们知道一个组件的生命周期是从创建到销毁的这个过程，当从一个页面跳转到另一个页面的时候，其实组件已经经历了一个生命周期

在浏览器被打开的时候是一个创建的过程，跳转到另一个页面又经历了销毁的过程，所以当我们从A页面跳转到B页面的时候，A页面已经被销毁了，假如在跳转之前我们对A页面进行了一个操作，接着我们从B页面再返回到A页面，发现原先在A页面上的操作没有了，但是假如我们想保存A页面原来的操作，我们应该怎么做呢？

可以利用vue的Keep-alive缓存组件

Keep-alive

使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，避免组件被返回后浏览器对它进行再度渲染，当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated 和 deactivated

activated ：该生命周期钩子会在组件被重新激活时调用
deactivated：该声明周期钩子会在组件被停用的时候调用

使用keep-alive会将数据保存在内存中，如果要每次进入页面时得到最新的数据，就要在activated里面重新请求获取数据，承担原来在created钩子和mounted钩子里获取数据的职责

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例
keep-alive中只能有一个根节点

使用方法

//第一种：直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
    <keep-alive>
      <component :is="flag"></component>
    </keep-alive>
 
//第二种：include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="testA，testB"
      <keep-alive include="testA">
         <component :is="flag"></component> 
      </keep-alive>
 
//第三种：include+正则表达式或者数组 这种情况必须用v-bind (:include="")
      <keep-alive :include="['testA']">
         <component :is="flag"></component>
      </keep-alive> 
 
//第四种：exclude 此时组件A内容不会被缓存，组件B内容会被缓存
      <keep-alive exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 
 
 
//特殊情况：若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
      <keep-alive include="testA,testB" exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 

结合Router使用

在router中为路由添加一个meta属性，设置 keepAlive:false/true

{
    path: '/tab',
    name: 'tab',
    meta:{
      keepAlive:true   //需要缓存
    },
    component: () => import('../views/Tab.vue')
  },
  {
    path: '/banner',
    name: 'banner',
    meta:{
      keepAlive:false   //不需要缓存
    },
    component: () => import('../views/Banner.vue')
  }

然后在App.vue中使用keep-alive包裹使用路由显示的入口**()**

    //此处是为添加了keepAlive=true 的路由添加缓存
    //会缓存路由出口的所有页面
     <keep-alive>
      <router-view> <router-view/>   
     </keep-alive>
     
    //此处是为添加了keepAlive=true 的路由添加缓存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>   
     </keep-alive>
 
    //此处是为添加了keepAlive=false 的路由默认不缓存
       <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"/>   
       </keep-alive>

使用场景

1. 多级路由切换：当你在应用程序中设置了多层嵌套路由，用户频繁地在不同层级之间切换时，keep-alive可以显著提高性能。因为它避免了在用户返回上一层路由时重新加载整个组件树的过程，减少了资源消耗和等待时间，提升了用户体验。

2. 复杂组件或大型应用：对于含有大量计算、数据绑定、DOM操作或依赖于特定环境状态的组件，重新构建和渲染可能导致性能下降。keep-alive通过缓存这些组件实例，减少不必要的重新初始化过程，提高了应用的整体性能。

3. 用户界面需要保留状态：在需要维持组件间状态一致性的情况下，比如聊天应用中历史消息的滚动查看，或者表单填写等场景，使用 keep-alive可以保证用户离开页面后再回来仍能接收到其输入的内容，而不需要重新填充初始状态。

4. 移动设备访问：移动网络环境通常较慢，频繁加载页面会导致更高的流量消耗和更长的响应时间。通过利用 keep-alive缓存组件，可以在一定程度上减轻对移动设备的网络负担，提升移动端应用的流畅度。

5. 高频率操作界面：在一些操作需要快速响应的界面设计中，如日历选择、搜索结果页等，频繁的切换操作可以借助 keep-alive 提升界面切换速度，提供更好的用户体验

6. 分页浏览：在数据密集型的应用中，如列表页面分页展示数据，用户频繁点击下一页或上一页时，使用 keep-alive可以避免重复加载数据，仅更新当前视图的部分内容。