溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue中mounted調用的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue中mounted調用的示例分析”這篇文章吧。
在開發(fā)中發(fā)現(xiàn)其中一個頁面moutned調用了兩次，而其他頁面正常，表示很懵逼，然后查找原因，終于找到了，其實歸根到底是要知道m(xù)ounted的調用機制問題；
情況：在這個頁面中出現(xiàn)了mounted 加載了兩次的情況；
方法：排除法
首先把 this.$store.commit() 方法注釋掉，發(fā)現(xiàn)就好了，只加載一次
初步判斷是commit 方法導致的
二 驗證判斷是否正確，不使用commit 方法，該用直接改變變量狀態(tài)的方法，發(fā)現(xiàn)又加載了兩次；
再次判斷，不是由于commit引起的
三 猜想commit到底實現(xiàn)了什么邏輯，然后找到了v-if
v-if會重新渲染頁面，而mounted 又是在重新渲染完成之后調用的，所以猜想是v-if導致的
然后換成v-show 發(fā)現(xiàn)完美解決問題；
v-show 不會重新加載頁面，僅僅是顯示隱藏而已；
從網(wǎng)上找來的生命周期圖，各位網(wǎng)友可以了解一下，希望給你帶來一些啟發(fā)；
PS：下面看下mounted函數(shù)調用技巧
為了確保dom成功渲染，利用setTimeout()
mounted() {
setTimeout(() => {
this._setSliderWidth()
this._initDots()
this._initSlider()
if (this.autoPlay) {
this._play()
}
}, 20)}瀏覽器的刷新通常是17毫秒一次，所以這里用了20毫秒
以上是“vue中mounted調用的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
