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 相关文章推荐
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
jQuery 位置插件
2008/12/25 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
django manage.py扩展自定义命令方法
2018/05/27 Python
python实现图片识别汽车功能
2018/11/30 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
销售团队获奖感言
2014/08/14 职场文书
优秀团队申报材料
2014/12/26 职场文书
培养联系人考察意见
2015/06/01 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
创业计划书之网吧
2019/10/10 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
pandas数值排序的实现实例
2021/07/25 Python