vue中mounted调用的示例分析-创新互联

这篇文章主要为大家展示了“vue中mounted调用的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中mounted调用的示例分析”这篇文章吧。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，创新互联建站面向各种领域：木包装箱等成都网站设计、成都营销网站建设解决方案、网站设计等建站排名服务。

在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题；

情况：在这个页面中出现了mounted 加载了两次的情况；

方法：排除法

首先把 this.$store.commit() 方法注释掉，发现就好了，只加载一次

初步判断是commit  方法导致的

二  验证判断是否正确，不使用commit 方法，该用直接改变变量状态的方法，发现又加载了两次；

再次判断，不是由于commit引起的

三   猜想commit到底实现了什么逻辑，然后找到了v-if  

v-if会重新渲染页面，而mounted 又是在重新渲染完成之后调用的，所以猜想是v-if导致的

然后换成v-show 发现完美解决问题；

v-show 不会重新加载页面，仅仅是显示隐藏而已； 

从网上找来的生命周期图，各位网友可以了解一下，希望给你带来一些启发；

 

PS：下面看下mounted函数调用技巧

为了确保dom成功渲染，利用setTimeout()

mounted() {
 setTimeout(() => {
  this._setSliderWidth()
  this._initDots()
  this._initSlider()

  if (this.autoPlay) {
   this._play()
  }
 }, 20)}

浏览器的刷新通常是17毫秒一次，所以这里用了20毫秒

以上是“vue中mounted调用的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：vue中mounted调用的示例分析-创新互联
本文来源：http://6mz.cn/article/dgjcso.html