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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
Javascript模拟实现new原理解析
Mar 03 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
XAMPP安装与使用方法详细解析
2013/11/27 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python中list初始化方法示例
2016/09/18 Python
python学生管理系统
2019/01/30 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
营业员演讲稿
2013/12/30 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
安全员岗位职责
2015/02/10 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
代码解析React中setState同步和异步问题
2021/06/03 Javascript
PHP使用QR Code生成二维码实例
2021/07/07 PHP
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电