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 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
JavaScript模块详解
Dec 18 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 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
长波有什么东西
2021/03/01 无线电
php5.5新数组函数array_column使用
2013/07/08 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
json 实例详细说明教程
2009/10/31 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
集团薪酬管理制度
2014/01/13 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
市场部管理制度
2014/02/02 职场文书
安全教育感言
2014/03/04 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书