Vue3获取保持活动缓存的组件

Question

我使用vuejs3+typescript构建了一个后台管理系统，并使用keep-alive来缓存页面。如何获取当前缓存的组件？

Answer 1

<keep-alive>组件exposes its cache as __v_cache。您可以在<keep-alive>上使用template ref，并从其内部实例($)读取__v_cache：

<template>
  <button @click="logKeepAliveCache">Log keep-alive cache</button>

  <router-view v-slot="{ Component }">
    <keep-alive ref="keepAlive">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script setup>
import { ref } from 'vue'

const keepAlive = ref()

const logKeepAliveCache = () => {
  // The cache is a `Map`, where the entry keys are
  // metadata about the component's file, and the
  // filename is stored in `__file`.
  console.log([...keepAlive.value.$?.__v_cache.keys()].map((x) => x.__file))
}
</script>

注意：__v_cache在生产版本中不可用。

demo