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处理textarea中的字符成每一行实例
Sep 22 Javascript
javascript继承机制实例详解
Nov 20 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
vue cli4下环境变量和模式示例详解
Apr 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP cron中的批处理
2008/09/16 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
深入理解PHP中的count函数
2016/05/31 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
Bootstrap精简教程
2015/11/27 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
三年级科学教学反思
2014/01/29 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
详解SQL报错盲注
2022/07/23 SQL Server