一、了解keepAlive

1.1 Vue 中的 keep-alive 是什么？

keep-alive 是 Vue.js 的一个内置组件，它用于缓存不活动的组件实例，而不是销毁它们。在 Vue 应用中，当组件被包含在 keep-alive 组件中时，该组件在切换时不会被销毁，而是被保存在一个内存中，这可以显著提升大型应用的性能，因为它避免了反复销毁和重建组件的开销。

1.2 为什么使用 keep-alive？

使用 keep-alive 主要有以下几个原因：

性能优化： 对于组件状态不需要每次都重新初始化的场景，使用 keep-alive 可以避免不必要的性能损耗。
用户体验： 在单页面应用中，用户在不同路由间切换时，保持组件状态可以提升用户体验，实现无闪烁的页面切换。
减少服务器负载： 由于组件状态得以保持，可以减少应用对服务器的请求次数，从而降低服务器负载。

1.3 如何使用 keep-alive？

使用 keep-alive 非常简单，你只需要将 包裹在需要缓存的组件外部即可。例如：

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div