前言:

在开发中偶然检查Network请求的时候发现,在页面中created钩子函数中请求了一个接口,但是页面这个页面加载的时候,接口会连续请求两边,然后我就排查是否有其他地方调用了同样的接口,检查了好几遍后发现并没有,WTF,然后我在created中打印了一下,惊奇的发现。。。created会执行两次打印。。。

WTF、WTF、WTF,小朋友你是否有很多问号???,然后试了下,不光created会执行两遍,mounted也行,就连watch里面监听的也会,握草(草是一种植物),此处省略我咔咔排查了一个小时各种删除各种排查的步骤。。。

得出以下结论:

第一种:

页面布局不合理,会导致执行两遍,比如行内元素内嵌套了块级元素,然后块级元素又使用了for,或者if,要想排查是否是这种情况,只能一点点删除代码,看看删除了那一块的代码后不再执行两遍,然后从病根出排查修改。

第二种:

有使用v-if和v-else的结合也会执行两遍,这种的我测试了下,把v-if都改成v-show。。。就TM的好了。

第三种:

我在页面中使用了swiper,发现。。。swiper的代码也会触发执行两遍,应该是swiper的代码触发了规则,然后我在swiper组件使用一个div包裹了一下。。。发现好了,无语,毫无规则可言

第四种:

还未发现,,,欢迎评论增加

最后:

此文章使用了较多的**修饰词,请原谅。。。因为那种你想象不到的问题原因着实让人。不说了,求个赞吧!!!

补充知识:vue.js页面加载执行created,mounted先后顺序

created页面加载未渲染html之前执行。

mounted渲染html后再执行。

由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。

以上这篇解决nuxt页面中mounted、created、watch执行两遍的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。

更新日志