vue mounted 呼叫兩次的解決辦法

摘要： 在開發中發現其中一個頁面moutned呼叫了兩次，而其他頁面正常，表示很懵逼，然後查詢原因，終於找到了，其實歸根到底是要知道mounted的呼叫機制問題； 情況：在這個頁面中出現了mounted 載入了兩次的情況； 方法：排除法 首先把 this.$store.commi...

在開發中發現其中一個頁面moutned呼叫了兩次，而其他頁面正常，表示很懵逼，然後查詢原因，終於找到了，其實歸根到底是要知道mounted的呼叫機制問題；

情況：在這個頁面中出現了mounted 載入了兩次的情況；

方法：排除法

首先把 this.$store.commit() 方法註釋掉，發現就好了，只加載一次

初步判斷是commit  方法導致的

二  驗證判斷是否正確，不使用commit 方法，該用直接改變變數狀態的方法，發現又載入了兩次；

再次判斷，不是由於commit引起的

三   猜想commit到底實現了什麼邏輯，然後找到了v-if  

v-if會重新渲染頁面，而mounted 又是在重新渲染完成之後呼叫的，所以猜想是v-if導致的

然後換成v-show 發現完美解決問題；

v-show 不會重新載入頁面，僅僅是顯示隱藏而已； 

從網上找來的生命週期圖，各位網友可以瞭解一下，希望給你帶來一些啟發；