vite keepalive清除缓存

在 Vite 中，使用 `keep-alive` 组件来缓存组件状态与 Vue2 中相同。同样可以通过手动触发组件的 deactivated 和 activated 钩子函数来清除缓存。

以下是一个示例：

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

<script>
export default {
  data() {
    return {
      include: ["Home", "About"], // 需要缓存的组件
      exclude: [] // 不需要缓存的组件
    }
  },
  methods: {
    clearCache() {
      // 清除缓存
      this.include.forEach(name => {
        const component = this.$refs[name][0];
        if (component) {
          component.deactivated();
          component.activated();
        }
      })
    }
  }
}
</script>

在上面的代码中，我们在父组件中使用 `keep-alive` 缓存需要缓存的组件，并在 `clearCache` 方法中手动触发组件的 deactivated 和 activated 钩子函数来清除组件缓存。需要注意的是，使用 `$refs` 获取组件实例之前，需要给组件添加 `ref` 属性。