vue3 清除keep-alive的缓存

你可以通过在 `<keep-alive>` 组件上使用 `include` 和 `exclude` 属性来控制缓存的组件。

1. 使用 `include` 属性可以指定要缓存的组件，只有包含在 `include` 列表中的组件才会被缓存。

<keep-alive :include="['ComponentA', 'ComponentB']">
  <!-- 组件A 和 组件B 会被缓存 -->
  <router-view></router-view>
</keep-alive>

2. 使用 `exclude` 属性可以指定不需要缓存的组件，被排除在 `exclude` 列表中的组件不会被缓存。

<keep-alive :exclude="['ComponentC', 'ComponentD']">
  <!-- 组件C 和 组件D 不会被缓存 -->
  <router-view></router-view>
</keep-alive>

如果你想在代码中动态清除缓存，可以通过访问 `$refs` 来获取 `<keep-alive>` 组件的实例，并调用其 `$options` 属性中的 `activated` 方法来手动清除缓存。

<template>
  <div>
    <keep-alive ref="myKeepAlive">
      <router-view></router-view>
    </keep-alive>
    <button @click="clearCache">清除缓存</button>
  </div>
</template>

<script>
export default {
  methods: {
    clearCache() {
      this.$refs.myKeepAlive.$options.activated = []
    }
  }
}
</script>

通过以上方法，你可以控制和清除 `<keep-alive>` 组件缓存的内容。