vue3 keep-alive缓存的组件销毁自己

在 Vue 3 的 keep-alive 组件中，缓存的组件是不会自行销毁的。它们只会在父组件中的条件满足时被缓存，而不会被销毁。

如果你希望在某个特定的时机手动销毁缓存的组件，可以通过在父组件中使用 `v-if` 或者 `$refs` 来控制缓存组件的显示与隐藏，从而间接实现销毁的效果。

以下是一个示例代码：

<template>
  <div>
    <keep-alive>
      <component ref="cachedComponent" v-if="isCached"></component>
    </keep-alive>
    <button @click="destroyComponent">销毁组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCached: true,
    };
  },
  methods: {
    destroyComponent() {
      this.isCached = false;
      this.$nextTick(() => {
        this.$refs.cachedComponent.$destroy();
      });
    },
  },
};
</script>

在这个示例中，我们使用了 `v-if` 来决定是否渲染缓存的组件。当点击 "销毁组件" 按钮时，会将 `isCached` 设为 `false`，从而导致组件被移除，并触发销毁操作。在 `$nextTick` 回调中，我们手动调用了 `$destroy()` 方法来销毁组件。

注意，在 Vue 3 中，`$destroy()` 方法已经被废弃，因此使用 `$destroy()` 方法来销毁组件仅适用于特定的情况。一般情况下，推荐使用 `v-if` 或者其他类似的方式来控制组件的销毁和重新创建。