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>
相关推荐
ElasticPDF-新国产PDF编辑器9 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin10 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌11 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光11 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs11 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石11 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking13 小时前
解决 axios get请求瞎转义问题
vue.js
向阳25613 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特13 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~13 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习