【前端面试题-11】简单说一下vue2的缓存策略

Vue2 中的缓存策略主要体现在对组件实例的复用上，特别是当页面需要频繁切换但希望保持组件状态的情况下。Vue
提供了一种内置的组件缓存机制，即 keep-alive 组件。

keep-alive 组件的使用：
在 Vue Router 配合单页应用开发时，可以通过 keep-alive 组件包裹动态组件 <router-view> 或其他需要缓存的组件，这样在路由切换时，被包裹的组件实例不会被销毁，而是进入休眠状态，当再次激活时直接唤醒，而不是重新创建新的实例。

基本用法：

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

这意味着当用户导航离开一个带有 keep-alive 的路由视图时，其组件的状态将会得到保留。你可以通过以下方式自定义缓存策略：

• include：指定只有名称匹配的组件会被缓存。可以是一个数组或正则表达式。
• exclude：指定任何名称匹配的组件不会被缓存。同样可以是一个数组或正则表达式。

例如：

<keep-alive include="a, b">
  <component :is="currentView"></component>
</keep-alive>

在上述代码中，只有当 currentView 是 ‘a’ 或 ‘b’ 时，对应的组件才会被缓存。

此外，Vue2 中针对路由的缓存策略通常在路由配置中通过 meta 字段来指定：

{
  path: '/home',
  component: Home,
  meta: {
    keepAlive: true // 表示该路由对应的组件需要被缓存
  }
}

结合 beforeRouteLeave 和 activated、deactivated 等生命周期钩子，开发者可以更好地控制组件在活跃状态和非活跃状态下的行为，以及何时应该更新或恢复数据。

另外，Vue2 中的缓存策略也可能涉及到更深层次的数据缓存，例如使用 Vuex 状态管理器存储共享状态，或者在服务端渲染（SSR）场景下，利用缓存策略优化 API 数据的获取和渲染性能。