vue3清除keep-alive缓存

在 Vue3 中，可以通过`<keep-alive>`组件的`include`和`exclude`属性来控制缓存的组件，具体实现如下：

1. 在需要清除缓存的组件上，添加一个唯一的`key`属性，例如：

<template>
  <div :key="componentKey">需要清除缓存的组件</div>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    // 点击按钮，更新 componentKey，清除缓存
    updateKey() {
      this.componentKey++
    }
  }
}
</script>

2. 在`<keep-alive>`组件中，设置`include`或`exclude`属性来控制缓存的组件，例如：

<template>
  <keep-alive :include="includeList" :exclude="excludeList">
    <router-view />
  </keep-alive>
</template>

<script>
export default {
  computed: {
    includeList() {
      // 需要缓存的组件名称列表
      return ['ComponentA', 'ComponentB']
    },
    excludeList() {
      // 需要清除缓存的组件名称列表
      return ['ComponentC']
    }
  }
}
</script>

当需要清除缓存时，调用组件的`updateKey`方法即可。这样，组件的`key`会更新，被排除在缓存之外，再次进入时会重新加载。