前端优化方案—— keepAlive 组件缓存

使用缓存的原因

在一些需要频繁浏览的页面或者组件，如首页、导航页、搜索页等页面会有或多或少的请求和图片资源，这样非常浪费服务器的资源；所以我们需要用到缓存，将某个页面缓存起来，不将其卸载；这样下次进入该页面，就可以不在向服务器请求资源，且大大优化了用户体验。

路由元信息配置

在路由元信息中添加一个布尔值用于待会做条件渲染

<KeepAlive />内置组件的使用

  <RouterView v-slot="{ Component,route }">
    <KeepAlive>
      <component :is="Component" v-if="route.meta.keepAlive" :key="route.name" />
    </KeepAlive>

    <component :is="Component" v-if="!route.meta.keepAlive" :key="route.name" />
  </RouterView>

Component：指对应路由的组件

route：获取对应路由的信息，这里就是用到前面设置的路由元信息来做条件渲染，分别渲染需要和不需要缓存的页面（组件）

这样即可自己定义需要缓存的页面或者组件了

需要用到的钩子函数

在vue3的组合式API中，由于缓存后的组件不会触发 onUnmounted() 函数，且只会在第一次渲染时使用 onBeforeMount() 和 onMounted() 函数，所以需要用到 onActivated() 和 onDeactivated() 函数。

onActivated()：当进入缓存的页面，即组件插入Dom时调用的函数

onDeactivated()：当离开缓存的页面，即组件移除Dom时调用的函数

使用这两个钩子函数即可处理缓存页面下相对应的代码逻辑

vue2或者vue3的选项式API同理，对应的钩子函数可以去翻阅vue文档。