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 02 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
angularJS开发注意事项
May 26 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
js实现时分秒倒计时
Dec 03 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
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python操作SQLite数据库的方法详解
2017/06/16 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
C#面试题问题集
2016/04/02 面试题
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
安全生产专项整治方案
2014/05/06 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
教师求职自荐信
2015/03/26 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
MySQL 如何限制一张表的记录数
2021/09/14 MySQL