vue生命周期执行两次的debug之路
版本:vue3.2说明:本文仅代表其中一种可能的情况,仅作为参考1.bug最初的地方(使用了setup语法糖)网上查找资料,v-if可能会导致onMounted执行两次。计划方案:a.v-if替换为v-show,未解决;b.onMounted换成其他生命周期,比如created,仍未解决。2.偶然发现整个setup语法糖内都会执行两次,如下:查看编译后源码发现,setup语法糖会编译为setup(
·
版本: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",使组件只加载一次。
拿下!
最后贴一下项目截图:
更多推荐
已为社区贡献1条内容
所有评论(0)