vue mounted 调用两次的完美解决办法


Posted in Javascript onOctober 29, 2018

在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题;

vue mounted 调用两次的完美解决办法

情况:在这个页面中出现了mounted 加载了两次的情况;

方法:排除法

首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次

初步判断是commit  方法导致的

二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次;

再次判断,不是由于commit引起的

三   猜想commit到底实现了什么逻辑,然后找到了v-if  

v-if会重新渲染页面,而mounted 又是在重新渲染完成之后调用的,所以猜想是v-if导致的

然后换成v-show 发现完美解决问题;

v-show 不会重新加载页面,仅仅是显示隐藏而已; 

vue mounted 调用两次的完美解决办法

从网上找来的生命周期图,各位网友可以了解一下,希望给你带来一些启发;

vue mounted 调用两次的完美解决办法 

PS:下面看下mounted函数调用技巧

为了确保dom成功渲染,利用setTimeout()

mounted() {
 setTimeout(() => {
  this._setSliderWidth()
  this._initDots()
  this._initSlider()

  if (this.autoPlay) {
   this._play()
  }
 }, 20)}

浏览器的刷新通常是17毫秒一次,所以这里用了20毫秒

总结

以上所述是小编给大家介绍的vue mounted 调用两次的完美解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
javascript 节点排序 2
Jan 31 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 #Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 #Javascript
深入浅析javascript函数中with
Oct 28 #Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 #Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 #Javascript
javascript中函数的写法实例代码详解
Oct 28 #Javascript
You might like
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
工程部主管岗位职责
2013/11/17 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
三年级科学教学反思
2014/01/29 职场文书
走进敬老院活动总结
2014/07/10 职场文书
股指期货心得体会
2014/09/13 职场文书
公司委托书范本5篇
2014/09/20 职场文书
公司行政管理制度范本
2015/08/05 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript