解决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 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
javascript中的delete使用详解
Apr 11 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
深入理解angularjs过滤器
May 25 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
一些不错的js函数ajax
2008/08/20 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
js实现交通灯效果
2017/01/13 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python中__init__.py文件的作用详解
2016/09/18 Python
python实现顺时针打印矩阵
2019/03/02 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python文件及目录操作代码汇总
2020/07/08 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
党校培训思想汇报
2014/01/03 职场文书
大学生村官任职感言
2014/01/09 职场文书
医学类个人求职信范文
2014/02/05 职场文书
倡议书格式
2014/04/14 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python