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实现的分页函数
Feb 07 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 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
php简单图像创建入门实例
2015/06/10 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
canvas知识总结
2017/01/25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python 占位符的使用方法详解
2019/07/10 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python使用建议技巧分享(三)
2020/08/18 Python
浅析python连接数据库的重要事项
2021/02/22 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
七一党建活动方案
2014/01/28 职场文书
年终晚会活动方案
2014/08/21 职场文书
普宁寺导游词
2015/02/04 职场文书
创先争优个人总结
2015/03/04 职场文书
十八大观后感
2015/06/12 职场文书
解决Redis启动警告问题
2022/02/24 Redis