Vue3 keep-alive复习介绍

在 Vue 3 中，<keep-alive> 是一个内置组件，用于缓存动态组件或页面的实例，从而避免频繁销毁和重新创建，提高应用的性能和用户体验。它常用于 SPA（单页面应用）中对路由页面的缓存，特别是在用户在不同页面间切换时，保持页面的状态和滚动位置等信息。

1. <keep-alive> 的作用

• 缓存组件状态：<keep-alive> 会将包裹的组件实例保存在内存中，当该组件被移除时不会销毁，而是在重新展示时直接复用之前的实例。
• 减少重新渲染和销毁：适合用于那些频繁切换的视图或组件，减少创建和销毁的开销，从而提升应用的性能。
• 保持组件的状态：可以保留组件中的数据和未保存的状态（如表单数据、滚动位置等），防止用户在切换页面时丢失操作。

2. <keep-alive> 的使用场景

• 路由切换时：在单页面应用中，常用于对路由视图的缓存。
• 动态组件切换：例如在 Tab 切换中，对各个 Tab 页缓存，避免每次切换都重新加载。

3. <keep-alive> 的工作原理

Vue 3 的 <keep-alive> 组件在内部通过缓存对象和生命周期钩子来实现。具体的实现流程大致如下：

1. 缓存组件实例：当组件首次被加载时，<keep-alive> 会将该组件的实例存入一个缓存对象（cache）中，键是组件的标识符，值是组件的实例。
2. 复用实例：当需要展示之前缓存的组件时，<keep-alive> 会从缓存中找到对应的实例，并将其重新插入到页面上，而不是重新创建新的实例。
3. 控制缓存的数量：通过 max 属性可以控制缓存的最大组件数量。超过这个数量时，<keep-alive> 会移除最早缓存的实例，采用 LRU（最近最少使用）策略。
4. 生命周期钩子：
   • activated：当缓存的组件被重新激活时触发。
   • deactivated：当缓存的组件被隐藏或移除时触发。

4. 示例代码

<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</template>

在这个示例中：

• <keep-alive> 包裹了 <router-view>，所以只有 meta.keepAlive 为 true 的页面会被缓存。
• 其他未设置 keepAlive 的路由则不会缓存，保持默认的加载和销毁。

5. <keep-alive> 的属性

• include/exclude：可以指定哪些组件或页面需要被缓存。
  • include：缓存的组件名称列表。
  • exclude：不需要缓存的组件名称列表。
• max：指定最多缓存的组件数量，超过限制时会按照 LRU 策略移除。

<keep-alive :include="['Home', 'About']" :exclude="['Contact']" :max="10">
  <router-view></router-view>
</keep-alive>

6. 使用钩子监听 <keep-alive> 状态

可以在被缓存的组件中使用 activated 和 deactivated 钩子来处理组件被激活和停用时的逻辑。

<script>
export default {
  name: "MyComponent",
  activated() {
    console.log("Component is activated"); // 组件被激活
  },
  deactivated() {
    console.log("Component is deactivated"); // 组件被停用
  }
}
</script>

7. 总结

<keep-alive> 的原理是通过缓存对象维护组件实例，从而避免销毁和重建。它在 Vue 3 中依然保持着高效的缓存机制，适合用于缓存频繁切换的视图组件。配合路由和生命周期钩子，<keep-alive> 提供了一种灵活的方式来优化 Vue 应用的性能。