vue3 keepAlive 详细用法

在 Vue 3 中，`keep-alive` 组件用于缓存动态组件或路由视图，以提高性能并节省资源。它可以将组件保留在内存中并缓存其状态，而不是每次重新渲染。下面是 `keep-alive` 的详细用法：

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

   <keep-alive>
     <!-- 需要缓存的组件 -->
     <component></component>
   </keep-alive>

2. 组件内部可以通过 `activated` 和 `deactivated` 生命周期钩子来处理组件的激活和停用事件：

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

3. 可以通过设置 `include` 和 `exclude` 属性来指定要缓存或排除的组件：

   <keep-alive include="ComponentA,ComponentB">
     <!-- 缓存 ComponentA 和 ComponentB 组件 -->
     <component></component>
   </keep-alive>

   <keep-alive exclude="ComponentC">
     <!-- 缓存除了 ComponentC 组件以外的组件 -->
     <component></component>
   </keep-alive>

4. 可以动态控制 `keep-alive` 组件的缓存状态：

   <keep-alive :include="includeComponents">
     <component></component>
   </keep-alive>

   <button @click="includeComponents.push('ComponentA')">缓存 ComponentA 组件</button>