vue3从精通到入门14：内置组件之KeepAlive

<keep-alive> 是一个内置组件，它可以缓存不活动的组件实例，而不是销毁它们。当组件在 <keep-alive> 内被切换时，它的激活和停用状态会被相应地触发，而不是被重新创建或销毁。这对于性能优化和保持组件状态非常有用，特别是在组件之间频繁切换的场景中。

基本使用

通过特殊的 <component> 元素来实现动态组件。

<component :is="activeComponent" />

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

触发切换组件

<template>  
  <div>  
    <button @click="currentView = 'view1'">View 1</button>  
    <button @click="currentView = 'view2'">View 2</button>  
  
    <keep-alive>  
      <component :is="currentView"></component>  
    </keep-alive>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { ref } from 'vue';  
import View1 from './View1.vue';  
import View2 from './View2.vue';  
  
const currentView = ref('view1');  
  
// 注册组件，使得它们可以在模板中通过 :is 绑定来动态切换  
defineComponent({  
  components: {  
    View1,  
    View2  
  }  
});  
</script>  
  
<style scoped>  
/* 组件样式 */  
</style>

在这个例子中，我们定义了两个按钮来切换视图。<keep-alive> 包裹了一个动态组件 <component :is="currentView"></component>，该组件会根据 currentView 的值来渲染不同的组件（View1 或 View2）。

缓存实例的生命周期

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

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

<script setup lang="ts">  
import { onActivated, onDeactivated } from 'vue';  
  
onActivated(() => {  
  console.log('View activated');  
  // 执行激活时的逻辑，比如恢复之前的状态  
});  
  
onDeactivated(() => {  
  console.log('View deactivated');  
  // 执行停用时的逻辑，比如清除定时器或取消事件监听  
});  
</script>

请注意：

• onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。

• 这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。

include/exclude

如果你想进一步控制哪些组件被缓存，可以使用 <keep-alive> 的 include 和 exclude 属性。这些属性接受一个字符串或正则表达式数组，用于匹配组件的 name 选项。

只缓存名为 View1 的组件：

<keep-alive include="View1">  
  <component :is="currentView"></component>  
</keep-alive>

对名为View1不就行缓存：

<keep-alive exclude="View1">  
  <component :is="currentView"></component>  
</keep-alive>

使用正则表达式来匹配多个组件名：

<keep-alive :include="[/^View/, /Complex/]">  
  <component :is="currentView"></component>  
</keep-alive>