vue3中RouterView配合KeepAlive实现组件缓存

幽冥雪羽2025-05-22 8:03

KeepAlive组件缓存

为什么需要组件缓存
代码展示
缓存效果
为什么不用v-if

为什么需要组件缓存

业务需求：一般是列表页面通过路由跳转到详情页，跳转回来时，需要列表页面展示上次展示的内容

代码展示

App.vue入口

javascript 复制代码

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router"
</script>

<template>
  <div>
    <RouterLink to="/">
      home
    </RouterLink>
    <RouterLink to="/about">
      about
    </RouterLink>
  </div>
  <div>
    <RouterView v-slot="{ Component }">
      // AboutComponent是组件的名称,vue4组件中通过defineOptions定义
      <KeepAlive include="AboutComponent">
        <component :is="Component" />
      </KeepAlive>
    </RouterView>
  </div>
</template>

home.vue组件

javascript 复制代码

<template>
  <div>home</div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
defineOptions({
  name: "HomeComponent",
})
onMounted(() => {
   console.log("home onMounted")
})
</script>

about.vue组件

javascript 复制代码

<template>
  <div>about</div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
defineOptions({
  name: "AboutComponent",
})
onMounted(() => {
  console.log("about onMounted")
})
</script>

缓存效果

1、home和about组件首次加载都会执行onMounted生命周期，但是对about组件进行了缓存，再次切换到about组件，就不会重新初始化，就不会执行onMounted生命周期。

2、keepalive使用include和exclude实现缓存的好处是：只要被缓存的组件首次加载之后，无论在缓存组件之间切换，还是缓存组件与未缓存组件之间切换，都不会重新挂载。

为什么不用v-if

网络上经常使用就是如下代码：

javascript 复制代码

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

虽然也能实现页面缓存，但是从非缓存组件 切换到缓存组件 时，会重新挂载缓存组件 ，从而再次执行onMounted生命周期，只有在两个同样是缓存的组件之间切换才会有实际的缓存效果