Vue 3 路由组件缓存keep-alive

Vue 3 路由组件缓存

Vue3 KeepAlive官方文档

1. keep-alive 基本介绍

• keep-alive 是 Vue 的内置组件，用于缓存动态组件或路由组件，避免组件被频繁销毁和重建，从而提高性能。
• 当组件被 keep-alive 包裹后，在路由切换时不会销毁组件，而是将其缓存起来。下次切换回来时，会直接使用缓存，而不是重新渲染。

2. keep-alive 基本使用

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

• router-view 用于显示当前匹配的路由组件，包裹在 keep-alive 中后，可以实现组件的缓存。

3. keep-alive 的属性

• include：指定需要被缓存的组件。匹配组件的 name 属性，可以是字符串或正则表达式。
• exclude：指定不需要被缓存的组件。匹配组件的 name 属性，可以是字符串或正则表达式。
• max：最多缓存的组件实例数量。超过这个数量时，最久没有使用的实例会被销毁。

示例：

<template>
  <keep-alive include="Home,About" exclude="Contact" max="3">
    <router-view />
  </keep-alive>
</template>

• include: 只缓存 Home 和 About 组件。
• exclude: 不缓存 Contact 组件。
• max: 最多缓存 3 个组件实例。

4. 路由组件的缓存

• 在 Vue Router 中，使用 keep-alive 缓存路由组件时，确保每个路由组件都有一个唯一的 name 属性。

• 路由配置示例：

  const routes = [
    { path: '/home', name: 'Home', component: () => import('@/views/Home.vue') },
    { path: '/about', name: 'About', component: () => import('@/views/About.vue') },
    { path: '/contact', name: 'Contact', component: () => import('@/views/Contact.vue') }
  ];
  

• 组件示例：

  <script>
  export default {
    name: 'Home'
  };
  </script>
  

• 在主组件中使用 keep-alive 缓存这些路由组件：

  <template>
    <keep-alive include="Home,About">
      <router-view />
    </keep-alive>
  </template>
  

注意，include和exclude的值是对应的组件名。
在vue3的setup语法糖中可以使用unplugin-vue-define-options插件简化操作
Vue3 name 属性使用技巧

<script setup lang="ts">
defineOptions({
  name: "MyComponent"  
})
<script>

还可以使用vite-plugin-vue-setup-extend插件来直接在script上进行属性name命名组件

<script setup lang="ts" name="User">
# 这里至少有一行注释，否则插件不生效
</script>

Vue3.x中给组件添加name属性

5. 组件的生命周期钩子

• activated：组件被激活（从缓存中恢复）时调用。
• deactivated：组件被停用（进入缓存）时调用。
• 示例：

  <script>
  export default {
    name: 'Home',
    activated() {
      console.log('Home component activated');
      // 组件从缓存中恢复时，可以重新加载数据或执行其他操作
    },
    deactivated() {
      console.log('Home component deactivated');
      // 组件被缓存时，执行清理操作
    }
  };
  </script>
  

6. 处理缓存问题

1. 缓存更新问题：

   • 使用动态 key 强制组件重新渲染而非使用缓存。
   • 示例：

     <template>
       <router-view :key="$route.fullPath" />
     </template>
     

2. 选择性缓存：

   • 使用 include 和 exclude 精细控制缓存，也可使用 v-if 等手段手动销毁组件。

总结

• keep-alive 是 Vue 中用于缓存组件的工具，常用于路由组件的缓存。
• 使用 include 和 exclude 精细控制哪些组件需要缓存。
• 使用 activated 和 deactivated 生命周期钩子处理组件激活和停用时的逻辑。
• 动态 key 设置可以强制组件重新渲染。