vue3 - keepAlive缓存组件

在Vue 3中，<keep-alive>组件用于缓存动态组件或路由组件的状态，避免重复渲染，提升性能。

我们新建两个组件，在每一个组件里面写一个input，在默认情况下当组件切换的时候，数据会被清空，但是我们用keep-alive包起来之后，数据将会被缓存，切换的时候不会被清空

<template>
  <div>
    <button @click="flag = !flag">Change</button>
    <keep-alive>
      <A v-if="flag" />
      <B v-else />
    </keep-alive>
  </div>
</template>
<script setup lang='ts'>
  import { ref } from 'vue'
  import A from './components/A.vue'
  import B from './components/B.vue'
  const flag = ref<boolean>(true)
</script>
<style scoped>
</style>

属性配置

 1. include & exclude

        include : 声明想要被缓存的组件，比如我们有两个组件，我们只想缓存A组件，不想缓存B组件，那么我们可以用include声明，include支持字符串，数组，正则，比如：这个时候，当我们切换组件的时候，B组件是没有被缓存的

       exclude : 和include作用相反，exclude是声明不想被缓存的组件

<keep-alive :include="['Home', 'About']" :exclude="['Contact']">
  <component :is="currentComponent" />
</keep-alive>

组件名要求：组件需显式定义name选项。使用<script setup>时，可通过以下方式定义

<script>
  export default { name: 'Home' } // 单独定义name
</script>
<script setup>
  // 组件逻辑
</script>

 2. max
         限制最大缓存实例数，超出时销毁最久未访问的实例：

<keep-alive max="5">
  <component :is="currentComponent" />
</keep-alive>

生命周期钩子

被缓存的组件会触发特定生命周期：

• activated：组件被激活时触发。

• deactivated：组件被切出缓存时触发。

在组合式API中使用：

<script setup>
import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
  console.log('组件激活，可刷新数据');
});

onDeactivated(() => {
  console.log('组件离开，清理操作');
});
</script>

结合Vue Router

1. 按路由元信息缓存
   通过路由的meta字段控制缓存：

   <router-view v-slot="{ Component }">
     <keep-alive>
       <component :is="Component" v-if="$route.meta.keepAlive" />
     </keep-alive>
     <component :is="Component" v-if="!$route.meta.keepAlive" />
   </router-view>

   路由配置：

   const routes = [
     { path: '/home', component: Home, meta: { keepAlive: true } },
     { path: '/about', component: About }
   ];

2. 动态路由参数处理
   添加唯一key确保不同参数实例独立缓存：

   <keep-alive>
     <component :is="Component" :key="$route.fullPath" />
   </keep-alive>

注意事项

• 组件命名：确保缓存的组件已正确设置name。

• 内存管理：使用max限制缓存数量，避免内存过度占用。

• 数据刷新：在activated中更新数据，而非mounted。

• 嵌套组件：<keep-alive>仅缓存直接子组件。

示例场景

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cachedComponents" :max="3">
      <component 
        :is="Component" 
        :key="$route.fullPath" 
        v-if="$route.meta.keepAlive"
      />
    </keep-alive>
    <component 
      :is="Component" 
      :key="$route.fullPath" 
      v-if="!$route.meta.keepAlive"
    />
  </router-view>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const cachedComponents = computed(() => 
  route.matched
    .filter(r => r.meta.keepAlive)
    .map(r => r.components.default.name)
);
</script>

通过合理配置<keep-alive>，可以有效优化应用性能，同时结合路由和组件生命周期管理数据状态。