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 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
webpack的pitching loader详解
Sep 23 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python实现石头剪刀布程序
2021/01/20 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
如何定义一个可复用的服务
2014/09/30 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
单位承诺书格式
2014/05/21 职场文书
设备管理实施方案
2014/05/31 职场文书
初中班级口号
2014/06/09 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
pandas数值排序的实现实例
2021/07/25 Python