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

6,995 阅读1分钟

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

拿下!

最后贴一下项目截图: