遇到問題
在vue頁面中使用elementUI的彈出層 在頁面初始化時加載的JsBarcode 條形碼沒有出現(xiàn)
然后我在思考是否是和echarts 一樣視圖生成但是數(shù)據(jù)并沒有渲染. 獲取不到DOM
這個時候要介紹一下 Vue $nextTick
使用場景
在進(jìn)行獲取數(shù)據(jù)后,需要對視圖進(jìn)行下一步操作或者其他操作時,發(fā)現(xiàn)獲取不到DOM
原因:
這里就涉及到Vue一個很重要的改建:異步更新隊列(JS運(yùn)行機(jī)制, 事件循環(huán)).
Vue在觀察到數(shù)據(jù)變化時并不是直接更新DOM,而是開啟一個隊列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變.
在緩沖時會去除重復(fù)數(shù)據(jù).從而避免不必要的計算和DOM操作.
然后,在下一個事件循環(huán)tick中,Vue刷新隊列并執(zhí)行實際(已去重)工作.
所以如果用for循環(huán)來動態(tài)改變數(shù)據(jù)100次,其實他只會應(yīng)用最后一次改變,如果沒有這種機(jī)制,DOM就要重繪100次?
很過分 會讓你變老變慢
