Vue3 内置组件之KeepAlive

概述

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

组件在加载时会经历初始、挂载、更新、销毁生命周期，对于动态组件加载来说，频繁地切换组件会不断地重复组件的初始、挂载、销毁生命周期，这意味着程序需要不断地读取和释放内存，因此将会极大地影响内存开销，从而影响项目的性能。

用法

简单使用

定义3个组件：

Comp1.vue:

<script setup>
import {
  onActivated,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onMounted,
  onUnmounted,
  onUpdated, ref
} from "vue";

onBeforeMount(() => {
  console.log("Comp1 onBeforeMount");
});
onMounted(() => {
  console.log("Comp1 onMounted");
});

onBeforeUpdate(() => {
  console.log("Comp1 onBeforeUpdate");
});

onUpdated(() => {
  console.log("Comp1 onUpdated");
});

onBeforeUnmount(() => {
  console.log("Comp1 onBeforeUnmount");
});

onUnmounted(() => {
  console.log("Comp1 onUnmounted");
});

onActivated(() => {
  console.log("Comp1 onActivated");
});

onDeactivated(() => {
  console.log("Comp1 onDeactivated");
});

const count = ref(0);
const increase = () => {
  count.value++;
};
</script>
<script>
export default {
  name: "Comp1"
};
</script>

<template>
  <h2>组件一</h2>
  <p>这是一些内容1111111</p>
  <p>count: {{ count }}</p>
  <button @click="increase">count++</button>
</template>

Comp2.vue:

<script setup>
// 省略
const num = ref(0);
const increase = () => {
  num.value++;
};
</script>
<script>
export default {
  name: "Comp2"
};
</script>

<template>
  <h2>组件二</h2>
  <p>这是一些内容222222</p>
  <p>num: {{ num }}</p>
  <button @click="increase">num++</button>
</template>

Comp3.vue:

<script setup>
    // 省略
</script>
<script>
export default {
  name: "Comp3"
};
</script>

<template>
  <h2>组件三</h2>
  <p>这是一些内容33333333</p>
</template>

使用 <KeepAlive> 组件：

<script setup>
import {markRaw, ref} from "vue";
import Comp1 from "./components/Comp1.vue";
import Comp2 from "./components/Comp2.vue";
import Comp3 from "./components/Comp3.vue";

// 标记为原始对象，表示内部不能被修改
const tab = ref(markRaw(Comp1));

// 切换组件
function switchTab(comp) {
  tab.value = markRaw(comp);
}

// 默认显示
switchTab(Comp1);
</script>

<template>
  <h1>内置组件之KeepAlive</h1>
  <button @click="switchTab(Comp1)">切换组件一</button>
  <button @click="switchTab(Comp2)">切换组件二</button>
  <button @click="switchTab(Comp3)">切换组件三</button>
  <KeepAlive>
    <component :is="tab"></component>
  </KeepAlive>
</template>

说明：

如果不使用 <KeepAlive> 组件，切换时新组件会被创建，旧组件会被销毁，频繁切换会导致组件被频繁的销毁和创建，极大消耗性能。

如果使用 <KeepAlive> 组件，切换组件时不再被销毁，而是回调 onActivated() 表示被激活，回调 onDeactivated() 表示被失活。

include & exclude

<KeepAlive> 组件支持 include 和 exclude 属性，用于限制内部缓存的组件：

• include：
• exclude：
• 属性值支持字符串、数组、正则表达式。

<KeepAlive include="Comp1,Comp2">
    <component :is="tab"></component>
</KeepAlive>

说明：表示仅缓存 Comp1 和 Comp2 组件。

max

<KeepAlive> 组件支持 max 属性，用于限制缓存组件的最大数量。比如想要将内存中缓存组件的最大数量设置为5，就可以将max的值写为5。

max 的算法遵循LRU（Least Recently Used，最近最少使用）算法：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<KeepAlive max="2">
    <component :is="tab"></component>
</KeepAlive>