版本:vue3.2
本文仅代表其中一种可能的情况,仅作为参考
bug最初的地方(使用了setup语法糖)
网上查找资料,v-if可能会导致onMounted执行两次。
计划方案:
a.v-if替换为v-show,未解决;
b.onMounted换成其他生命周期,比如created,仍未解决。
偶然发现整个setup语法糖内都会执行两次,如下:
查看编译后源码发现,setup语法糖会编译为setup() ,即setup()执行了两次。
考虑可能父组件中存在v-if导致组件重复注册
父组件中:
发现和使用created还是mounted等无关。当前组件也被重复注册了两次。
继续查找该组件的父组件,发现生命周期不重复执行了
最后定位问题,由于
key绑定了rid,初始化为'',后赋值为随机字符串,导致组件重载
解决方案:外层加v-if="rid",使组件只加载一次。
拿下!