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 相关文章推荐
js操作textarea 常用方法总结
Dec 03 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
js面向对象编程总结
Feb 16 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php xml文件操作代码(一)
2009/03/20 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python中数字是否为可变类型
2020/07/08 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
医务人员自我评价
2014/01/26 职场文书
2015入党自传格式范文
2015/06/26 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript