vue3中 keepalive用法

在Vue 3项目中，`<keep-alive>` 组件的使用略有不同，因为Vue 3不再直接支持`v-if="$route.meta.keepAlive"`这样的语法。以下是Vue 3中`keep-alive`的基本用法：

1. **配置App.vue**[^1]:

   <!-- Vue 3配置 -->
   <template>
     <keep-alive>
       <router-view :key="$route.fullPath" />
     </keep-alive>
     <router-view v-if="!isMounted()" />
   </template>

   // 在data或setup钩子中定义isMounted状态
   setup() {
     const isMounted = ref(false);
     onMounted(() => (isMounted.value = true));
     return { isMounted };
   }

这里使用`:key="$route.fullPath"`来唯一标识每个路由视图，确保Vue不会对已离开但可能再次进入的组件进行不必要的重新渲染。

2. **动态缓存组件**:
如果你想只缓存特定的组件，可以这样设置：

   <keep-alive>
     <component :is="viewComponent" :key="viewKey" />
   </keep-alive>

其中`viewComponent`是动态加载的组件名，`viewKey`是组件的一个唯一标识。

注意：`<router-view>`应该始终作为第一个子元素放在`<keep-alive>`内，其他非缓存的视图通过条件渲染（如`v-if`)添加。