vue3Keep-alive

Vue3中的Keep-alive是一个内置组件，它可以缓存组件的状态，以便在后续的渲染中重用。 Keep-alive可以用来优化应用程序的性能，特别是在处理大型列表和复杂的视图结构时。

使用Keep-alive时，将要缓存的组件包裹在<keep-alive>标签中，如下所示：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

在这个例子中，当用户点击“Toggle Component”按钮时，currentComponent的值会在两个组件之间进行切换。由于这两个组件都被包裹在Keep-alive标签中，它们的状态会被缓存，以便在下一次渲染时重用。这可以减少不必要的组件销毁和重新渲染，从而提高应用程序的性能。