Vue3 内置组件之KeepAlive

文章目录

  • [Vue3 内置组件之KeepAlive](#Vue3 内置组件之KeepAlive)

Vue3 内置组件之KeepAlive

概述

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

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

用法

简单使用

定义3个组件:

Comp1.vue:

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:

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:

vue 复制代码
<script setup>
    // 省略
</script>
<script>
export default {
  name: "Comp3"
};
</script>

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

使用 <KeepAlive> 组件:

vue 复制代码
<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:
  • 属性值支持字符串、数组、正则表达式。
vue 复制代码
<KeepAlive include="Comp1,Comp2">
    <component :is="tab"></component>
</KeepAlive>

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

max

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

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

vue 复制代码
<KeepAlive max="2">
    <component :is="tab"></component>
</KeepAlive>
相关推荐
山海上的风3 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
jjw_zyfx5 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷7 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱05679 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.9 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding9 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥9 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信9 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩9 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass