vue生命周期执行两次的debug之路

版本：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"，使组件只加载一次。

拿下！

最后贴一下项目截图：