Admin.NET框架前端由于keep-alive设置缓存导致的onUnmount未触发问题

bug版本:next分支,基于.NET6版本;
问题描述:
1、添加keep-alive后,在其下运行的组件会出现onActived(被关注时)和onDeactived(取消关注时)生命周期,而组件原有生命周期为onMounted(被创造时)和onUnmounted(组件销毁时)。
2、若按照正常逻辑运行,打开一个tag的时候触发onMounted和onActived,当切换当前查看的tag时触发onDeactived,当关闭该tag时触发onDeactived和onUnmounted。
3、而实际测试发现,关闭tag时只触发了onDeactived,未触发onUnmounted。

bug影响:
1、onUnmounted未能被触发可能导致,若在前面的生命周期中使用了watch或其他时间监听设置,会无法被自动销毁,多次关闭打开同个tag后会有大量的监听重复建立,导致时间重复触发。
2、还可能导致web资源未能被回收,前面打开的tag只是被关闭,而没有被销毁,若不断重复打开tag和关闭tag可能会导致资源的负荷。

如下图所示,在每个生命周期添加一句打印,查看触发情况。而后打开一个开启了缓存功能的tag并关闭它,会发现并没有触发onUnmounted,而后若是重新打开和关闭该tag的操作,也只触发了onMounted、onActivated、onDeactivated,未触发onUnmounted。

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

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

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

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

在这里插入图片描述

解决方案:
找到下图路径下的keepAliveNames文件,在删除缓存操作中添加延迟。而后测试,即可正常触发onUnmounted生命周期。
在这里插入图片描述
附一张keep-alive被设置位置的图做参考,下图无需要修改的内容:
在这里插入图片描述

注:该bug在Admin.net框架的最新版本中已被修复,具体导致的原因我也不太理解,可能是splice函数和keep-alive的include参数的工作原理存在冲突。
搜索半天也没找到类似的问题和解决方案,只有论坛https://segmentfault.com/q/1010000041002204,也提到了splice不触发keep-alive的问题,但是下面的回复全都文不对题,全都是讲新增了onActived、onDeactived两个生命周期,没有一个人理解楼主问的是组件被从include中使用splice移除后未被正常销毁的问题,让人看着恼火。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/921327.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器学习day7-线性回归3、逻辑回归、聚类、SVC

7欠拟合与过拟合 1.欠拟合 模型在训练数据上表现不佳,在新的数据上也表现不佳,常发生在模型过于简单无法处理数据中的复杂模式时。 特征: 训练误差较高 测试误差也高 模型过于简化,不能充分学习训练数据中的模式 2.过拟合 …

【鸿蒙开发】第二十二章 IPC与RPC进程间通讯服务

目录 1 IPC与RPC通信概述 2 实现原理 3 约束与限制 4 使用场景 5 开发步骤 5.1 Native侧开发步骤 5.2 ArkTS侧开发步骤 6 远端状态订阅开发实例 6.1 使用场景 6.1.1 Native侧接口 6.2 ArkTS侧接口 6.3 Stub感知Proxy消亡(匿名Stub的使用) 1 …

【开发小技巧11】用经典报表实现badge list效果,根据回显内容用颜色加以区分

之前使用badge list实现首页指标数据回显,但是无法根据对应数据进行个性化动态展示,那要如何解决呢?下面就来看看如何通过经典报表实现badge list效果,根据回显内容用颜色加以区分。 普通经典报表 想要做成类似这样的效果并且能…

rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

我们在使用rust-oracle crate连接oracle进行测试的过程中,会发现无法连接oracle,测试运行过程中抛出“DPI-1047: Cannot locate a 64-bit Oracle Client library”错误。该问题是由于rust-oracle需要用到oracle的动态连接库,我们通过安装orac…

cocos creator 3.8 一些简单的操作技巧,材质的创建 1

这是一个飞机的3D模型与贴图 导入到cocos中,法线模型文件中已经包含了mesh、material、prefab,也就是模型、材质与预制。界面上创建一个空节点Plane,将模型直接拖入到Plane下。新建材质如图下 Effect属性选择builtin-unlit,不需…

python oa服务器巡检报告脚本的重构和修改(适应数盾OTP)有空再去改

Two-Step Vertification required: Please enter the mobile app OTPverification code: 01.因为巡检的服务器要双因子认证登录,也就是登录堡垒机时还要输入验证码。这对我的巡检查服务器的工作带来了不便。它的机制是每一次登录,算一次会话…

数据集-目标检测系列- 荷花 莲花 检测数据集 lotus>> DataBall

数据集-目标检测系列- 荷花 莲花 检测数据集 lotus>> DataBall DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。 贵在坚持! 数据样例项目地址: * 相关项目 1)数据集可视化项…

操作系统——揭开盖子

计算机执行时——取指执行 es:bx等于从0x9000开始,到0x90200结束

CTF 攻防世界 Web: SSRF Me write-up

题目名称-SSRF ME captcha 解码 目录扫描没有发现有用结果,根据提示 url 可能用来访问内部资源,根据题目名称可以猜测 ssrf。 其中 Captcha 用到 md5 加密截取,而且在每一次刷新网页时候会改变,可以写代码爆力枚举 Captcha 的值…

医学图像语义分割:前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室

医学图像语义分割:前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室 语义分割网络FCN:通过将全连接层替换为卷积层并使用反卷积上采样,实现了第一个端到端的像素级分割网络U-Net:采用对称的U形编解码器结构&#xff…

WPF窗体基本知识-笔记-命名空间

窗体程序关闭方式 命名空间:可以理解命名空间的作用为引用下面的控件对象 给控件命名:一般都用x:Name,也可以用Name但是有的控件不支持 布局控件(容器)的类型 布局控件继承于Panel的控件,其中下面的border不是布局控件,panel是抽象类 在重叠的情况下,Zindex值越大的就在上面 Z…

pytorch官方FasterRCNN代码详解

本博文转自捋一捋pytorch官方FasterRCNN代码 - 知乎 (zhihu.com),增加了其中代码的更详细的解读,以帮助自己理解该代码。 代码理解的参考Faster-RCNN全面解读(手把手带你分析代码实现)---前向传播部分_手把手faster rcnn-CSDN博客 1. 代码结构 作为 to…

大数运算(加减乘除和输入、输出模块)

为什么会有大数呢?因为long long通常为64位范围约为 -9,223,372,036,854,775,808 到 9,223,372,036,854,775,807,最多也就19位,那么超过19位的如何计算呢?这就引申出来大数了。 本博客适合思考过这道题,但是没做出来或…

Excel的图表使用和导出准备

目的 导出Excel图表是很多软件要求的功能之一,那如何导出Excel图表呢?或者说如何使用Excel图表。 一种方法是软件生成图片,然后把图片写到Excel上,这种方式,因为格式种种原因,导出的图片不漂亮&#xff0c…

LLM: AI Mathematical Olympiad (下)

文章目录 一、SC-TIR策略(工具整合推理)二、SC-TIR原理三、避免过拟合四、代码分析1、Main函数2、SC-TIR control flow3、Extract answer4、Execute completion 总结 本文较长分成两个部分分析 | ू•ૅω•́)ᵎᵎᵎ 第一部分:预备知识介绍和…

06、Spring AOP

在我们接下来聊Spring AOP之前我们先了解一下设计模式中的代理模式。 一、代理模式 代理模式是23种设计模式中的一种,它属于结构型设计模式。 对于代理模式的理解: 程序中对象A与对象B无法直接交互,如:有人要找某个公司的老总得先打前台登记传达程序中某个功能需要在原基…

前端vue调试样式方法

1.选中要修改的下拉框&#xff0c;找到对应的标签的class样式 2.在浏览器中添加width宽度样式覆盖原有的样式&#xff0c;如果生效后说明class对了&#xff0c;则到vue页面的strye中添加覆盖样式 <style> :deep(.el-select){width: 180px; } </style>3.寻找自定义…

刷写树莓派系统

一. 树莓派做smb文件服务器参考视频 click here 二. 在官网上下载适合自己树莓派型号的镜像文件 三. 使用官方的riprpi-imager刷写软件 可以自动将TF卡(micro sd卡)格式化为适合树莓派系统运行的文件格式Fat32。就无需自己手动格式化进行刷写。 四. 出现文件验证失败 先把…

Python中的XGBOOST算法实现详解

文章目录 Python中的XGBOOST算法实现详解一、引言二、XGBoost算法原理与Python实现1、XGBoost算法原理1.1、目标函数的二阶泰勒展开 2、Python实现XGBoost2.1、环境准备2.2、导入库2.3、数据准备2.4、数据拆分2.5、模型训练2.6、模型预测与评估2.7、特征重要性可视化 三、总结 …

android 使用MediaPlayer实现音乐播放--权限请求

在Android应用中&#xff0c;获取本地音乐文件的权限是实现音乐扫描功能的关键步骤之一。随着Android版本的不断更新&#xff0c;从Android 6.0&#xff08;API级别23&#xff09;开始&#xff0c;应用需要动态请求权限&#xff0c;而到了android 13以上需要的权限又做了进一步…