当前位置：首页 > news >正文

Vue3 内置组件之KeepAlive

news 来源：原创 2025/5/6 20:29:17

文章目录

Vue3 内置组件之KeepAlive
- 概述
- 用法
- - 简单使用
  - include & exclude
  - max

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>

Vue3 内置组件之KeepAlive

文章目录 Vue3 内置组件之KeepAlive概述用法简单使用include & excludemax Vue3 内置组件之KeepAlive 概述 <KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。组件在加载时会经历初始、挂载、更新、销毁生命周期&a…...

编程日记 2025/5/6 20:29:17

生物医学信号处理--绪论

前言参考书籍：刘海龙，生物医学信号处理，化学工业出版社生物医学信号分类 1、由生理过程自发或者诱发产生的电生理信号和非电生理信号 • 电生理信号：ECG/心电、EEG/脑电、EMG/肌电、 EGG/胃电、 EOG/眼电 • 非电生理信号&am…...

编程日记 2025/5/4 21:48:46

30天开发操作系统第 12 天 -- 定时器

前言定时器(Timer)对于操作系统非常重要。它在原理上却很简单，只是每隔一段时间(比如0.01秒)就发送一个中断信号给CPU。幸亏有了定时器，CPU才不用辛苦地去计量时间。……如果没有定时器会怎么样呢?让我们想象一下吧。假如CPU看不到定时器而仍想计量时…...

编程日记 2025/5/7 9:46:30

一、需求和技术 1、实现5,4,3,2,1启动页倒计时 2、倒计时实现使用CountDownTimer 二、activity代码 public class OpenActivity extends AppCompatActivity {private Button in;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanc…...

编程日记 2025/5/7 9:53:03

Win10和11 git/Android Studio遇到filename too long问题的解决

1、打开windows长文件、长路径支持： 可以参考这篇文章： 修改注册表方法： 使用Admin登陆machine，在run中输入regedit并回车； 找到路径 ’Computer -> HKEY_LOCAL_MACHINE -> SYSTEM -> CurrentControlSet -&g…...

编程日记 2025/5/3 22:05:37

OpenCV相机标定与3D重建(43)用于计算矫正和重映射的变换函数initUndistortRectifyMap()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述计算畸变矫正和校正变换映射。该函数计算联合的畸变矫正和校正变换，并以 remap 所需的地图形式表示结果。矫正后的图像看起来像是原…...

编程日记 2025/5/6 17:23:41

运行npm install 时，卡在sill idealTree buildDeps没有反应

运行npm install 时，卡在sill idealTree buildDeps没有反应原因： 淘宝镜像源的域名早已经过期，所以我们需要绑定新的镜像源。 2021 年，淘宝就发布了消息称，npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 re…...

编程日记 2025/5/4 17:51:12

与 Oracle Dataguard 相关的进程及作用分析

与 Oracle Dataguard 相关的进程及作用分析目录与 Oracle Dataguard 相关的进程及作用分析与 Oracle Dataguard 相关的进程及作用分析一、主库的进程1、LGWR 进程2、ARCH进程3、LNS 进程二、备库的进程1、RFS 进程2、ARCH3、MRP（Managed Recovery Process&#x…...

编程日记 2025/5/7 9:49:09

如何在Windows上编译OpenCV4.7.0

前言参考：Win10 下编译 OpenCV 4.7.0详细全过程，包含xfeatures2d 这里在其基础上还出现了一些问题，仅供参考。正文一、环境 1、win10 2、cmake-gui 3、opencv4.7.0 4、VS2019 二、编译过程 1、下载需要的文件： 通…...

编程日记 2025/5/4 13:45:41

get和post有什么区别

GET和POST是HTTP协议中两种常用的请求方法，它们在用途、参数传递方式、缓存处理、安全性等方面存在显著差异。以下是对GET和POST区别的详细讲解，并给出示例演示。一、GET和POST的区别用途 GET：主要用于获取信息，即进行查询操…...

编程日记 2025/5/4 15:43:14

STM32之CAN通讯（十一）

STM32F407 系列文章 - CAN通讯（十一） 目录前言一、CAN 二、CAN驱动电路三、CAN软件设计 1.CAN状态初始化 2.头文件相关定义 3.接收中断服务函数 4.用户层使用 1.用户层相关定义 2.发送数据 3.接收数据 1.查询方式处理 2.中断方式处理 3…...

编程日记 2025/5/7 9:35:02

23.行号没有了怎么办滚动条没有了怎么办 C#例子

新建了一个C#项目，发现行号没有了。想把行号调出来，打开项目，选择工具>选项> 如下图，在文本编辑器的C#里有一个行号，打开就可以了滚动条在这里：...

编程日记 2025/5/4 12:13:35

QT 下拉菜单设置参数起始端口/结束端口/线程数量端口扫描4

上篇文章QT实现端口扫描暂停和继续功能 3-CSDN博客双击添加对话框类界面设计由于主体代码已经写完，只需要更改参数的获取即可获取起始端口结束端口的输入槽函数给主界面类添加调用对话框类的功能实现功能：点击菜单项可以弹出对话框窗体增加槽…...

编程日记 2025/5/7 7:15:00

spark——RDD算子集合

目录算子转换算子示例mapflatMapReduceByKeyfilterdistinctglomgroupBygroupByKeySortBysortByKeyunion交集intersection和差集subtractjoinpartitionBymapPartitionsample 行动算子示例ForeachPartitionForeachSaveAsTextFileCountByKeyReducefoldfirst、take、counttop、tak…...

编程日记 2025/5/5 20:23:03

【ArcGIS Pro二次开发实例教程】(1)：图层的前置、后置

一、简介此工具要实现的功能是：将内容框中当前选定的图层移到最顶层或最底层。主要技术要点包括： 1、Config.daml文件设置（UI设置） 2、按钮的图片和位置设置 3、当前选定图层的获取 4、图层在内容列表中位置的获取和移动 …...

编程日记 2025/5/5 23:55:13

idea 运行 docker-compose 文件问题

我idea 连接远程docker 然后本地运行compose 文件出了问题 C:\Program Files\Docker\Docker\resources\bin\docker.exe compose -f D:\aproject\group-buy-market\suger_group_buy\docs\dev-ops\docker-compose-environment.yml -p dev-ops up -d正在准备 Docker SSH 环境…ti…...

编程日记 2025/5/7 9:35:02

深度学习中的正则化方法

最近看到了正则化的内容，发现自己对正则化的理解已经忘得差不多了，这里在整理一下，方便以后查阅。深度学习中的正则化方法 1. L2 正则化（L2 Regularization）2. L1 正则化（L1 Regularization）3.…...

编程日记 2025/5/5 21:45:09

LInux单机安装Redis

1. 安装gee工具包由于Redis是基于c语言编写的所以安装的时候需要先安装gee以及gcc的依赖,yum云用不了可以看一下这个 linux 替换yum源镜像_更换yum镜像源-CSDN博客 yum install -y gcc tcl 2. 添加redis的压缩包 3. 上传到Linux 上传到 /usr/local/src 目录、这个目录一般用于…...

编程日记 2025/5/4 3:37:13

kafka使用以及基于zookeeper集群搭建集群环境

一、环境介绍 zookeeper下载地址：https://zookeeper.apache.org/releases.html kafka下载地址：https://kafka.apache.org/downloads 192.168.142.129 apache-zookeeper-3.8.4-bin.tar.gz kafka_2.13-3.6.0.tgz 192.168.142.130 apache-zookee…...

编程日记 2025/5/6 2:55:40

深入理解 pytest_runtest_makereport：如何在 pytest 中自定义测试报告

pytest_runtest_makereport 是 pytest 系统中的一个钩子函数，它允许我们在测试执行时获取测试的报告信息。通过这个钩子，我们可以在测试运行时（无论是成功、失败还是跳过）对测试结果进一步处理，比如记录日志、添加自定…...

编程日记 2025/5/7 9:53:03

嵌入式技术之Linux(Ubuntu) 一

一、Linux入门 1.硬件和操作系统以及用户的关系一个传感器，获得数据后，需要向服务器发送数据。传感器传数据给上位机。上位机需要一个程序来接收数据，那么这个上位机是什么机器？ 我们的笔记本电脑就可以当成上位机。两个手…...

编程日记 2025/5/7 9:53:03

VB.NET CRC32 校验

在 VB.NET 中实现 CRC32 校验并在校验失败时退出程序，你可以按照以下步骤进行： ‌实现 CRC32 计算函数‌：首先，你需要一个函数来计算给定数据的 CRC32 值。 ‌比较计算的 CRC32 值‌：然后，你需要将计算出的…...

编程日记 2025/5/3 19:15:26

iOS - 弱引用表（Weak Reference Table）

1. 基本数据结构 // 弱引用表的基本结构 struct weak_table_t {weak_entry_t *weak_entries; // 保存所有的弱引用对象size_t num_entries; // 当前存储的弱引用数量uintptr_t mask; // 哈希表大小掩码uintptr_t max_hash_displacement; /…...

编程日记 2025/5/3 22:34:40

Taro地图组件和小程序定位

在 Taro 中使用腾讯地图 1.首先在项目配置文件 project.config.json 中添加权限： {"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}} }2.在 app.config.ts 中配置&#x…...

编程日记 2025/5/7 9:51:42

汇编实现函数调用

x86_64 通过将函数参数存放在栈中的方式来实现参数传递。 # PURPOSE: Program to illustrate how functions work # This program will compute the value of # 2^3 5^2 ## Everything in the main program is stored in registers, # so the data section…...

编程日记 2025/4/24 9:36:06

C#—Task异步的常用方法及TaskFactory工厂类详解

Task异步的常用方法 C# 中的 Task 类是 System.Threading.Tasks 命名空间的一部分，用于表示异步操作。以下是一些常用的 Task 类方法： 一、Task.Run(Action action): 此静态方法用于在后台运行一个新任务，并返回与该任务关联的 Task 实例…...

编程日记 2025/5/4 21:15:29

JAVA | 通过自定义注解与AOP防止接口重复提交

关注：CodingTechWork 引言在Web应用开发中，特别是在处理表单提交或API调用时，可能会遇到用户因网络延迟、按钮多次点击等原因导致的重复提交问题。为了解决这一问题，通常的做法是在前端禁用提交按钮，或者在后端使用唯…...

编程日记 2025/5/5 7:23:08

从零手写实现redis（四）添加监听器

1、删除监听器 /*** 删除监听器接口** author binbin.hou* since 0.0.6* param <K> key* param <V> value*/ public interface ICacheRemoveListener<K,V> {/*** 监听* param context 上下文* since 0.0.6*/void listen(final ICacheRemoveListenerContext&…...

编程日记 2025/5/5 18:04:11

Spring Boot项目中使用单一动态SQL方法可能带来的问题

1. 查询计划缓存的影响深入分析数据库系统通常会对常量SQL语句进行编译并缓存其执行计划以提高性能。对于动态生成的SQL语句，由于每次构建的SQL字符串可能不同，这会导致查询计划无法被有效利用，从而需要重新解析、优化和编译，…...

编程日记 2025/5/4 23:04:46

51单片机——中断（重点）

学习51单片机的重点及难点主要有中断、定时器、串口等内容，这部分内容一定要认真掌握，这部分没有学好就不能说学会了51单片机 1、中断系统 1.1 概念中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的，中断功能的存在&#…...

编程日记 2025/5/4 22:19:50

MySQL insert or update方式性能比较

MySQL中，有如下两种方式，哪种方式比较好？ 1、先使用enterprise_id字段查询数据表，如果表中存在记录，则更新记录；如果不存在，则插入记录； 2、使用“INSERT INTO XXX ON DUPLICATE K…...

编程日记 2025/5/4 1:29:11

Linux下常用命令

本文以笔记的形式记录Linux下常用命令。注1：限于研究水平，阐述难免不当，欢迎批评指正。注2：文章内容会不定期更新。一、Ubuntu 添加账号 useradd -m -s /bin/bash -d /home/newuser newuser:newuser passwd newuser 二、 Ce…...

编程日记 2025/5/5 14:47:44

计算机网络、嵌入式等常见问题简答

1.嵌入式系统中经常要用到无限循环，如何用C编写死循环答：while(1){}或者for(;;) 2.程序的局部变量存在于哪里，全局变量存在于哪里，动态申请数据存在于哪里。答：程序的局部变量存在于栈区；全局变量存在…...

编程日记 2025/5/7 9:37:25

嵌入式中QT实现文本与线程控制方法

第一：利用QT进行文件读写实现利用QT进行读写文本的时候进行读写，读取MP3歌词的文本，对这个文件进行读写操作。实例代码，利用Qfile，对文件进行读写。 //读取对应文件文件，头文件的实现。 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #incl…...

编程日记 2025/5/1 22:07:48

141.环形链表 142.环形链表II

141.环形链表 & 142.环形链表II 141.环形链表思路：快慢指针 or 哈希表快慢指针代码： class Solution { public:bool hasCycle(ListNode *head) {if(headnullptr||head->nextnullptr)return false;ListNode *fasthead->next; //不能设置成…...

编程日记 2025/5/5 23:55:02

计算机网络掩码、最小地址、最大地址计算、IP地址个数

一、必备知识 1.无分类地址IPV4地址网络前缀主机号 2.每个IPV4地址由32位二进制数组成 3. /15这个地址表示网络前缀有15位，那么主机号32-1517位。 4.IP地址的个数：2**n (n表示主机号的位数) 5.可用（可分配）IP地址个数&#x…...

编程日记 2025/5/1 12:00:53

第3章——HTTP报文内的HTTP信息

第3章——HTTP报文内的HTTP信息 HTTP报文用于HTTP协议交互的信息被称为HTTP报文，分为请求报文和响应报文。分为Head，Body 结构： 请求行：包含用于请求的方法，请求URI和HTTP版本。状态行：包含表明响应…...

编程日记 2025/5/4 22:03:54

Minio-Linux-安装

文章目录 1.Linux安装1.下载源码包2.上传到/usr/local/minio1.进入目录2.上传 3.开放执行权限4.创建minio文件存储目录及日志目录5.编写启动的shell脚本1.脚本编写2.赋予执行权限 6.启动！1.执行run脚本2.查看日志3.开放9001和9000端口1.服务器2.安全组3.访问&#x…...

编程日记 2025/5/5 21:51:21

面试高阶问题：对称加密与非对称加密的原理及其应用场景

目录第一章对称加密原理及算法实现第二章非对称加密原理及算法实现第三章对称加密与非对称加密的应用场景第四章对称加密与非对称加密的应用实例第五章对称加密与非对称加密的对比分析第一章对称加密原理及算法实现 1.1 对称加密的原理对称加密，又称私钥加密…...

编程日记 2025/4/28 22:20:10

报错 - decord 在 macOS Silicon 安装失败

问题：在 macOS M2 上 pip 安装 decord 出错： ERROR: Could not find a version that satisfies the requirement decord (from versions: none) ERROR: No matching distribution found for decord使用 decord 源码编译，make 也会出很多问题 …...

编程日记 2025/5/3 5:36:20

英伟达 RTX 5090 显卡赋能医疗大模型：变革、挑战与展望

一、英伟达 RTX 5090 与 RTX 4090 技术参数对比 1.1 核心架构与制程工艺在探讨英伟达 RTX 4090 与 RTX 5090 的差异时，核心架构与制程工艺无疑是最为关键的基础要素，它们从根本上决定了两款显卡的性能上限与应用潜力。 1.1.1 核心架构差异 RTX 4090…...

编程日记 2025/4/30 8:39:47

PyCharm简单调试

本文简单讲述一下PyCharm中经常用到的调试操作。示例代码如下： for i in range(10):print("hello", i)if i > 2:print("ok!")在代码前面打上断点，如下图所示： 单机调试按钮Debug 单机Resume Program按钮&#xf…...

编程日记 2025/5/6 11:31:31

快速入门Spring Cloud Alibaba，轻松玩转微服务

1 快速入门Spring Cloud Alibaba，轻松玩转微服务 1.1 架构架构图： 1.2 项目结构 1.2.1 系统框架版本版本适配查看：https://sca.aliyun.com/docs/2023/overview/version-explain/ Spring Boot Version ：3.2.4 Spring Clo…...

编程日记 2025/5/7 8:49:37

浅尝Appium自动化框架

浅尝Appium自动化框架 Appium自动化框架介绍Appium原理Appium使用安装平台驱动 Appium自动化框架介绍 Appium 是一个开源的自动化测试框架，最初设计用于移动应用的测试，但现在它也扩展了对桌面端应用的支持。Appium 使得自动化测试变得更加简单&#xf…...

编程日记 2025/5/5 23:51:46

poi-tl+kkviewfile实现生成pdf业务报告

需求背景，需要把ai生成的一些业务数据，生成一份pdf报告需求分析简单来说，就是json生成pdf的方案。直接生成pdf。适合一些pdf样式简单的场景，一般就是纯文本按序渲染，或者是纯表格。如果需要一些复杂的排布&#x…...

编程日记 2025/5/5 2:14:20

python导入模块失败

运行下面代码模块，出现报错，导入模块失败 import torch from layers.Embed import DataEmbedding from layers.Conv_Blocks import Inception_Block_V1 将你自己的目录添加到 sys.path，假设你的目录位置是D://winhzq//桌面//pydemo//…...

编程日记 2025/5/1 20:50:52