created mounted 動態獲取資料渲染後，獲取DOM問題

挖坑埋神經病發表於2018-07-19

口水記錄一個問題。 ┓(;´_｀)┏

寫程式碼的時候，遇到一個問題，就是在created裡面呼叫介面獲取資料，利用v-for渲染DOM後，再在mounted裡面呼叫渲染後的DOM時，一直無法獲取到，顯示為undefined。

按照VUE的生命週期來說

  • created 元件例項建立完成，屬性已繫結，但DOM還未生成，$el屬性還不存在。
  • mounted模板編譯/掛載之後。

按道理，在mounted裡面是可以獲取到created階段渲染的DOM的。後來通過console.log()來進行判斷，發現在mounted裡面的程式碼開始執行時，created階段的DOM渲染還未完成。

把mounted改為updated，DOM是可以獲取到的，但是由於我的程式碼中涉及到倒數計時等頻繁更新DOM的狀態，所以放棄了updated的這個方法。

  • updated 元件更新之後

後來通過查閱文件發現，有一個方法可以解決這種問題，呼叫$nextTick這個vue的全域性方法。即在mounted裡面呼叫此方法，用於DOM載入更新完後進行的一次回撥函式性質的操作。

    mounted(){
        this.$nextTick(_=>{
            //你的程式碼部分
            
        })
    }
複製程式碼

但是很可悲 = = ，我的created裡渲染的DOM還是比它要晚執行完，所以獲取DOM依然是undefined。

最後用了一個簡單粗暴的方法解決了此問題。

    mounted() {
        setTimeout(_ => {
        //你的程式碼部分
        
        }, 1000);
    }  
複製程式碼

(o°ω°o)

相關文章