解决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执行两遍的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了解决Vue watch里调用方法的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 这篇文章主要介绍了浅谈vue.watch的触发条件是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
解决nuxt页面中mounted、created、watch执行两遍的问题
这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-06解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-30- 下面小编就为大家分享一篇秒表计时器以及STOPWATCH(实例讲解)，具有很好的参考价值，希望对大家有所帮助...2020-06-25
Vue中watch、computed、updated三者的区别及用法
这篇文章主要介绍了Vue中watch、computed、updated三者的区别及用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了Vue中computed和watch的区别，对Vue感兴趣的同学，可以参考下...2021-05-12
vue.js中methods watch和computed的区别示例详解
methods,watch和computed都是以函数为基础的,但各自却都不同,这篇文章主要给大家介绍了关于vue.js中methods watch和computed区别的相关资料,需要的朋友可以参考下...2021-08-05- 这篇文章主要介绍了C#使用StopWatch获取程序毫秒级执行时间的方法,涉及C#操作时间的相关技巧,需要的朋友可以参考下...2020-06-25
- iPhone用户应该对“越狱”有所了解，越狱其实就是iOS版的Root，越狱后用户可以进行各种“个性化设置”。 手表也能越狱你听说过吗？今天 Twitter 用户发布的一组照片足以让关心 Apple Watch 越狱进展的人浮想联翩。Twitter [email protected]* * 今天曝光了 Apple Watch 疑似运行 Cydia 软件的图片，并附文“work in progress”（进展中）。Cydia是越狱成功的标志，难道Apple Watch也要被越狱了吗？...2016-07-04
vue created钩子函数与mounted钩子函数的用法区别
这篇文章主要介绍了vue created钩子函数与mounted钩子函数的用法区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-06- 这篇文章主要介绍了Spring计时器stopwatch使用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-08-12
- 这篇文章主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-08-24
- iPhone 的数据充电线都是1米，但 Apple Watch 的充电线有2米长，为什么？为什么比我的身高还高，太欺负了。想想你自己的手机数据线，就知道2米的确实不太好收纳。现在，有一款专为 Apple Watch 设计的移动电源，除了能完美收纳这2米的数据线外，还能给 Apple Watch 增加足足8天的续航。...2016-07-04
解决vue侦听器watch,调用this时出现undefined的问题
这篇文章主要介绍了解决vue侦听器watch,调用this时出现undefined的问题，具有很好的参考...2020-10-30- 根据市场研究公司 IDC 的数据统计显示，全球智能手表销量在今年第二季度跟去年同期相比下降了 32%，这其中，苹果首款智能手表 Apple Watch 的销量没有达到预期是一个不可忽视...2016-08-27
- 这篇文章主要介绍了vue使用watch监听器的基本使用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下...2021-10-21