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动态调整iframe高度的方法
Mar 06 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
详解vue 图片上传功能
Apr 30 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
mysql limit查询优化分析
2008/11/12 PHP
php分页函数示例代码分享
2014/02/24 PHP
php常用表单验证类用法实例
2015/06/18 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
业务员薪酬管理制度
2014/01/15 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
Flask response响应的具体使用
2021/07/15 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL