解决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执行两遍的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue项目中data数据之间互相访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
最近需要做一个el-table的表格,表头需要显示提示信息,本文主要介绍了ElementUI中el-table表格组件如何自定义表头,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了vue中上传视频或图片或图片和文字一起到后端的解决方法，需要的朋友可以参考一下2019-12-12
这篇文章主要介绍了使用Bootrap和Vue实现仿百度搜索功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
基于vue v-for 循环复选框-默认勾选第一个的实现方法
下面小编就为大家分享一篇基于vue v-for 循环复选框-默认勾选第一个的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue源码中一些util函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家分享一篇vue2.0 根据状态值进行样式的改变展示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最近需要做一个全屏功能,所以这里给大家总结下,这篇文章主要给大家介绍了关于vue项目实现局部全屏的相关资料,需要的朋友可以参考下2023-09-09
本文为大家介绍了VUE中内置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once2019-02-02
最新评论