版本:vue3.2

说明:本文仅代表其中一种可能的情况,仅作为参考

1.bug最初的地方(使用了setup语法糖)

 网上查找资料,v-if可能会导致onMounted执行两次

计划方案:

a.v-if替换为v-show,未解决;

b.onMounted换成其他生命周期,比如created,仍未解决。

2.偶然发现整个setup语法糖内都会执行两次,如下:

 查看编译后源码发现,setup语法糖会编译为setup(),即setup()执行了两次

3.考虑可能父组件中存在v-if导致组件重复注册

父组件中:

 发现和使用created还是mounted等无关。当前组件也被重复注册了两次。

 4.继续查找该组件的父组件,发现生命周期不重复执行了

 最后定位问题,由于

key绑定了rid,初始化为'',后赋值为随机字符串,导致组件重载 

解决方案:外层加v-if="rid",使组件只加载一次。

拿下!

最后贴一下项目截图:

 

Logo

前往低代码交流专区

更多推荐