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 模式实例 观察者模式
Oct 24 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 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
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
详解如何运行vue项目
2019/04/15 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
css3学习心得分享
2013/08/19 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
求职简历的自我评价怎样写好
2013/10/07 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
经理任命书模板
2014/06/06 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
小学生思想品德评语
2014/12/31 职场文书
艺术节开幕词
2015/01/28 职场文书
会议主持词通用版
2019/04/02 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
利用python做数据拟合详情
2021/11/17 Python