扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了“vue中mounted调用的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中mounted调用的示例分析”这篇文章吧。
创新互联建站是一家专注于成都网站设计、网站制作与策划设计,盐津网站建设哪家好?创新互联建站做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:盐津等地区。盐津做网站价格咨询:13518219792
在开发中发现其中一个页面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调用的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网