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

为什么需要组件缓存

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

代码展示

App.vue入口

<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组件

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

about.vue组件

<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

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

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

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