vue3 keep-alive使用

Vue3 的 `keep-alive` 指令用于缓存已经渲染过的组件，以避免重复渲染。使用 `keep-alive` 指令的组件会从 DOM 树中移除，但不会被销毁，其状态会被保存下来。当组件再次被渲染时，其状态会被恢复，而不是重新创建。

下面是 `keep-alive` 的基本使用方法：

1. 在需要被缓存的组件外包裹 `keep-alive`：

<template>
  <keep-alive>
    <YourComponent />
  </keep-alive>
</template>

2. 在被缓存的组件中使用 `activated` 和 `deactivated` 钩子函数：

<script>
export default {
  activated() {
    // 组件被激活时触发
  },
  deactivated() {
    // 组件被停用时触发
  }
}
</script>

需要注意的是，`keep-alive` 只会缓存有 `name` 属性的组件。如果组件没有 `name` 属性，则会抛出警告。另外，`keep-alive` 中的组件不会被销毁，因此需要手动清理组件状态，以避免内存泄漏。