当前位置:首页 >> 网络编程

解决nuxt页面中mounted、created、watch执行两遍的问题

前言:

在开发中偶然检查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执行两遍的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。