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。

html 复制代码
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移除后未被正常销毁的问题,让人看着恼火。

相关推荐
小的时候可菜了5 小时前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
liangshanbo12155 小时前
Webpack vs Vite 底层原理高频追问的问题
前端·webpack·node.js
web打印社区5 小时前
Windows 网页静默打印设置步骤:客户端、防火墙与联调清单
开发语言·前端·javascript·chrome·pdf·ecmascript
恋猫de小郭5 小时前
KMP 又改了编译流程, Separate Compilation 禁止了 `commonMain` 的依赖穿透
android·前端·flutter
吴声子夜歌5 小时前
Nginx应用与运维——Nginx Web服务应用实战(静态文件服务器的搭建)
运维·前端·nginx
程序猿乐锅6 小时前
【黑马点评 | 第十一篇】关注 Feed 流实现
java·数据库·redis·分布式·后端·缓存·maven
y = xⁿ6 小时前
关于Agent工程落地
前端·人工智能·python
web打印社区6 小时前
JS 静默打印怎么做:纯前端为什么不行,以及最小可跑通写法
开发语言·前端·javascript·websocket·网络协议·http·pdf
web打印社区6 小时前
HTML5 静默打印:前端页面怎么调用打印机且尽量不弹窗
前端·javascript·vue.js·pdf·html·html5
Python大数据分析6 小时前
开源免费、AI 驱动的 Web 打印设计器 OpenPrint:从拖拽设计到 ERP 对接全流程实战
前端·人工智能·开源