Vue3——内置组件KeepAlive

KeepAlive

1. 默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例

2. 解决方法：使用 <KeepAlive> 内置组件将这些动态组件包装起来

   在 DOM 内模板中使用时，它应该被写为 <keep-alive>。

   <!-- 非活跃的组件将会被缓存！ -->
   <KeepAlive>
     <component :is="activeComponent" />
   </KeepAlive>
   

3. 包含/排除

   • <KeepAlive> 默认会缓存内部的所有组件实例，但可以通过 include 和 exclude prop 来定制该行为

   • 它会根据组件的 name选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项

     <!-- 以英文逗号分隔的字符串 -->
     <KeepAlive include="a,b">
       <component :is="view" />
     </KeepAlive>
     
     <!-- 正则表达式 (需使用 `v-bind`) -->
     <KeepAlive :include="/a|b/">
       <component :is="view" />
     </KeepAlive>
     
     <!-- 数组 (需使用 `v-bind`) -->
     <KeepAlive :include="['a', 'b']">
       <component :is="view" />
     </KeepAlive>
     

4. 最大缓存实例数

   • 传入 max prop 来限制可被缓存的最大组件实例数

     <KeepAlive :max="10">
       <component :is="activeComponent" />
     </KeepAlive>
     

5. 缓存实例的生命周期

   • 一个持续存在的组件可以通过 onActivated()和 onDeactivated()注册相应的两个状态的生命周期钩子

   • 注意点

     • onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用
     • 这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件

     <script setup>
     import { onActivated, onDeactivated } from 'vue'
     
     onActivated(() => {
       // 调用时机为首次挂载
       // 以及每次从缓存中被重新插入时
     })
     
     onDeactivated(() => {
       // 在从 DOM 上移除、进入缓存
       // 以及组件卸载时调用
     })
     </script>