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

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

article 2024/11/23 18:20:30

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移除后未被正常销毁的问题，让人看着恼火。

查看全文

http://www.kler.cn/a/406081.html