解决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执行两遍的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。