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>
相关推荐
给月亮点灯|17 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He17 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头17 小时前
v-model与.aync的区别
前端·javascript·vue.js
xvmingjiang18 小时前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
m0_6161884919 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang19 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
Monly2121 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
武昌库里写JAVA21 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 6 - 响应式核心:链表实装应用
前端·vue.js
艾小码1 天前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js