vue3keep-live

在Vue 3中，`keep-alive`组件的使用方式和Vue 2中基本保持一致。你可以将`keep-alive`组件嵌套在最外层，然后在`keep-alive`内部使用条件渲染来控制不同组件的显示。

举个例子，你可以这样使用`keep-alive`组件：

<keep-alive>
  <Component1 v-if="xxx"/>
  <Component2 v-else-if="xxx"/>
 <Component1 v-else/>
</keep-alive>

这样，当`xxx`满足不同条件时，不同的组件会被缓存，并在切换时保留其状态和数据。

在实现上，`keep-alive`组件内部维护了一个key数组和一个缓存对象。每个被缓存的组件都会有一个唯一的key值，用于标识该组件。在组件被激活（activated）时，会从缓存中取出对应的组件实例进行渲染；在组件被停用（deactivated）时，该组件会被缓存起来。

需要注意的是，当使用了`keep-alive`组件后，组件的生命周期钩子`beforeDestroy`和`destroyed`不会被调用，因为组件并未真正销毁，而是被缓存起来了。取而代之的是，可以使用`deactivated`钩子来替代`beforeDestroy`和`destroyed`钩子的功能。

例如，在`deactivated`钩子中可以处理一些与销毁相关的操作，比如清除定时器：

deactivated() {
  console.log("切换触发了3");
  window.clearInterval(this.timers);
  this.timers = null;
}

总结来说，在Vue 3中，`keep-alive`组件的使用方式和Vue 2基本一致，通过嵌套在最外层并使用条件渲染来实现组件的缓存和复用。在`keep-alive`组件中，可以使用`activated`和`deactivated`钩子来替代`beforeDestroy`和`destroyed`钩子的功能。