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 常用方法基础教程
Feb 06 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
微信小程序支付前端源码
Aug 29 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
VUE写一个简单的表格实例
Aug 06 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
js根据后缀判断文件文件类型的代码
May 09 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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返回json数据函数实例
2014/10/09 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python访问系统环境变量的方法
2015/04/29 Python
python模块之re正则表达式详解
2017/02/03 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
民族团结先进个人材料
2014/02/05 职场文书
促销活动方案模板
2014/02/24 职场文书
校庆筹备方案
2014/03/30 职场文书
股票投资建议书
2014/05/19 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
出差报告怎么写
2014/11/06 职场文书
介绍信样本
2015/01/31 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015年创先争优工作总结
2015/05/23 职场文书