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面向对象程序设计三 原型模式(上)
Dec 21 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
浅谈Express异步进化史
Sep 09 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
Vue是怎么渲染template内的标签内容的
Jun 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python 解析XML文件
2009/04/15 Python
python实现SOM算法
2018/02/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
争论的故事教学反思
2014/02/06 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
手机被没收的检讨书
2014/10/04 职场文书