Vue缓存【全网超详细篇】

什么是vue缓存？

Vue等前端框架在路由切换或组件切换时，默认会销毁当前不再需要的组件实例，并创建新的组件实例以展示给用户。这是因为每个路由或组件通常都对应着特定的状态和数据，当切换到其他路由或组件时，原来的状态和数据就不再需要，因此Vue会调用组件的销毁钩子函数（如beforeDestroy和destroyed）来清理组件的状态和资源‌。
然而，在某些情况下，重新创建组件实例可能会带来不必要的性能开销，特别是当组件的状态和数据在切换后仍然需要保持时。为了解决这个问题，Vue框架提供了缓存机制，即Vue缓存。Vue缓存是指通过Vue框架内置的<keep-alive>组件或其他缓存策略，将不活动的组件实例及其状态缓存起来，而不是立即销毁。这样，在组件重新激活时，可以直接从缓存中恢复组件实例及其状态，而无需重新创建和初始化，从而提高了应用的性能和用户体验。

Vue缓存包括几种形式？

组件缓存、路由缓存、数据缓存、模板缓存、vuex缓存、浏览器缓存、服务端缓存。

组件缓存

通过使用keep-alive组件来缓存组件的状态和DOM结构，保持组件的状态即使在组件被移除DOM树后依旧存在，从而减少组建的重新渲染。<keep-alive> 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

路由缓存

通过Vue Router的keep-alive与路由结合使用来实现，这样可以在路由切换时保持组件状态，减少加载时间，避免重复加载相同的路由页面，保持页面状态，用户在返回上一个页面时不会丢失之前的操作‌。

keep-alive基本使用：

<keep-alive> 通常用于包裹动态组件或 <router-view>，以实现组件的缓存。

<template>
  <div>
    <keep-alive>
      <component :is="activeComponent"></component>
    </keep-alive>
  </div>
</template>

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

keep-alive的包含与排除：

<keep-alive> 组件提供了 include 和 exclude 属性，允许开发者指定哪些组件应该被缓存，哪些组件不应该被缓存。

<!-- 使用 include 属性 -->
<keep-alive include="componentA,componentB">
  <component :is="activeComponent"></component>
</keep-alive>

<!-- 使用 exclude 属性 -->
<keep-alive exclude="componentA,componentB">
  <component :is="activeComponent"></component>
</keep-alive>

kee-alive的生命周期钩子：

activated是组件被激活时执行的生命周期函数，deactivated则是组件被停用时执行的生命周期函数。

export default {
   
  activated() {
   
    // 组件被激活时执行
  },
  deactivated() {
   
    // 组件被停用时执行
  }
}

vue-router和keep-alive的结合使用：

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