前端八股文 keep-alive

是什么

是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM（在切换页面或者组件的时候不被销毁）

更加详细的解释

在该组件的内部，会使用一个缓存对象（Vue2为JS对象Vue3为Map对象）来存储被包裹的组件实例。当组件被切换到后台时，实例不会被销毁，而是被保存在缓存对象中；当组件再次被激活时，会直接从缓存对象中恢复实例，而不是重新创建。为了方便用户在使用该组件时进一步完成附加任务，其对应添加了两个生命周期钩子，这两个钩子允许我们在组件激活和停用时执行特定的逻辑。

activated： 当组件被激活时，会触发组件的activated生命周期钩子；
deactivated： 当组件被切换到后台时，则会触发deactivated生命周期钩子。

如何使用

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存 （这个就是结合router 和缓存进行的条件判断是否缓存相应的组件）

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

用<keep-alive>（上面这 html中的使用方法）

使用的场景

路由切换：在单页面应用（SPA）中，在不同的路由页面之间切换时，如果不希望每次切换都重新加载和渲染页面，可以使用 <keep-alive>来缓存这些页面。实际开发中常常有以下场景，有一个列表页面并且列表的每一项都会对应跳转到相应的详情页面，当用户从列表页面点击一项进入详情页面，然后再次返回到列表页面时，往往希望列表页面能保持原来的滚动位置和状态，这就可以使用 <keep-alive>来缓存列表页面。

1. 标签页切换：在一些复杂的界面中，可能会使用标签页（Tab）来切换不同的内容。如果每次切换标签页都重新渲染内容，可能会导致性能问题，尤其是当标签页的内容包含大量数据或复杂的组件时。在这种情况下，也可以使用 <keep-alive>来缓存标签页的内容。
2. 条件渲染：在使用v-if或v-show进行条件渲染时，如果希望在条件变化时保留组件的状态，而不是每次都重新创建和销毁组件，也可以使用 <keep-alive>来缓存组件。

3.性能优化：在一些性能敏感的场景中，例如列表滚动、动画等，可通过缓存组件来避免不必要的渲染，提高性能。

4.数据持久化：在一些需要保持数据状态的场景中，例如表单填写、游戏等，可通过 <keep-alive>使用户离开页面后能保持原来的数据，以便用户返回时可以继续操作