在開發中發現其中一個頁面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 調用兩次的完美解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！