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 对象成员的可见性说明
Oct 16 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JQuery球队选择实例
May 18 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 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实现用户认证及管理完全源码
2007/03/11 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php中stream(流)的用法
2014/03/25 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
php实现session共享的实例方法
2019/09/19 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python学习小技巧总结
2018/06/10 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
python开头的coding设置方法
2019/08/08 Python
深入了解python中元类的相关知识
2019/08/29 Python
详解django中Template语言
2020/02/22 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
应届生骨科医生求职信
2013/10/31 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技