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


Posted in Javascript onNovember 05, 2020

前言:

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

Javascript 相关文章推荐
javascript来定义类的规范小结
Nov 19 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
关于Vue中$refs的探索浅析
Nov 05 #Javascript
JavaScript 实现轮播图特效的示例
Nov 05 #Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 #Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #Javascript
JavaScript TAB栏切换效果的示例
Nov 05 #Javascript
You might like
php用header函数实现301跳转代码实例
2013/11/25 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python编程中的文件操作攻略
2015/10/16 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python验证码截取识别代码实例
2020/05/16 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
团代会宣传工作方案
2014/05/08 职场文书
学校搬迁方案
2014/06/15 职场文书
学校运动会报道稿
2014/09/23 职场文书
2014年居委会工作总结
2014/12/09 职场文书
小学生优秀评语
2014/12/29 职场文书
感谢信怎么写
2015/01/21 职场文书
初二物理教学反思
2016/02/19 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL