🚀当面试官问我都用过什么缓存场景
本文比较偏向业务场景，平时大家都是面向业务编程，我觉得多一些这样的分享可能对刚入门的小伙伴比较有用。只是一个在工作中发现的多页面切换没有达到预期缓存的效果的需求，所以当成一个分享。
什么是keepalive
<keep-alive>是一个内置的抽象组件，它用于缓存动态组件，以便在组件之间切换时保留组件的状态，而不需要每次都重新创建和销毁组件。这对于提高性能和用户体验非常有用，特别是在处理大型单页应用（SPA）或具有多个视图的应用时。
keepalive的作用
<keep-alive> 组件通常包裹动态组件，例如路由视图组件，以确保这些组件在切换时被缓存，而不会被销毁。它有两个主要用途：
- 缓存组件状态：当你使用
<keep-alive>包裹一个组件时，该组件的状态（数据、DOM状态等）将被保留。当你再次切换到该组件时，它将恢复到之前的状态，而不是重新渲染和初始化。这对于避免不必要的数据加载和渲染很有帮助，从而提高性能。 - 节省资源：由于组件的状态被保留，而不是销毁，
<keep-alive>可以减少内存和资源的开销。这对于具有多个页面或视图的应用，特别是在移动应用中，非常重要。
举个栗子
如图是工作的时候项目组提出的需求，我们可以看到在切换tab菜单的时候，上一个菜单页面所填写的筛选信息，当切换到另一个页面再切换回去的时候，就会由于页面没有缓存，而重新加载了页面，那么则会出现两个问题，也是业务场景中最常见的两个问题。
1.用户想切换到另一个页面查看详情，返回的时候筛选条件被清空，又要重新筛选
2.页面的节点较多，（我们这个系统的单筛选框就已经十几二十个，并且按钮等新增修改流转事件也有十几二十个）， 页面加载的比较慢，所以每次切换tab标签的时候就会多一段等待的时间。
解决方案
切换tab，筛选框中的值会变重置，希望达到的效果是切换回tab的时候保存筛选条件
//上方tabs栏
<transition name="fade-quick">
<i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
</transition>
//下方路由内容区
<div class="i-layout-content-main" style="margin-bottom:-0px">
<keep-alive >
<router-view />
</keep-alive>
</div>
给routerview加上keepalive，keepalive的包括空间是tabs下面的内容，目的是为了将下面的页面进行一个缓存，这样切换页面的时候筛选框的内容不会被清除，keepalive主要就是对roterview的路由来进行一个缓存
<keep-alive>是Vue.js提供的组件，用于缓存动态组件。它可以包裹一个组件，以便在组件之间切换时保留组件的状态，而不用每次都重新创建和销毁组件。<router-view>是用于呈现当前路由对应组件的Vue Router组件。在这段代码中，<router-view>被包装在<keep-alive>中，这意味着路由视图的组件会在切换路由时被缓存，以提高性能和用户体验。
所以，这段代码的作用是在加载路由视图时使用 <keep-alive> 缓存组件状态。
方案展示
下面是缓存后的结果，可以看到切换到另一个路由再切换回来，由于keepalive的缓存组件功能，上一个路由的筛选条件仍然能够保留下来。
方案进阶
合理利用includes
- 灵活性：在一些复杂的应用中，我们可能只想缓存其中的一部分组件，而不是全部。通过使用
includes，可以精确地控制哪些组件被缓存，哪些不被缓存。 - 性能：缓存所有的组件可能会占用较多的内存，特别是在大型应用中。通过只缓存那些真正需要的组件，可以减少内存消耗，提高性能。
- 避免意外缓存：某些组件不适合被缓存，比如某些编辑修改实时刷新的页面。
<div class="i-layout-content-main" style="margin-bottom:-0px">
<keep-alive :include="keepAliveList">
<router-view v-if="loadRouter" />
</keep-alive>
</div>
keepAliveList包含了一些需要被缓存到的组件，写法大概是这样的
<keep-alive :include="['ComponentA', 'ComponentB']"> <router-view /> </keep-alive>