關於vue中的nextTick深入理解

2022-01-29 18:33:52 字數 860 閱讀 7270

nexttick的由來:

由於vue的資料驅動檢視更新,是非同步的,即修改資料的當下,檢視不會立刻更新,而是等同一事件迴圈中的所有資料變化完成之後,再統一進行檢視更新。

nexttick的觸發時機:

在同一事件迴圈中的資料變化後,dom完成更新,立即執行nexttick(callback)內的**。

應用場景:

需要在檢視更新之後,基於新的檢視進行操作。

以上出現了事件迴圈的概念,其涉及到js的執行機制,包括主線程的執行棧、非同步佇列、非同步api、事件迴圈的協作,此處不展開之後再總結。大致理解:主線程完成同步環境執行,查詢任務佇列,提取隊首的任務,放入主線程中執行;執行完畢,再重複該操作,該過程稱為事件迴圈。而主線程的每次讀取任務佇列操作,是乙個事件迴圈的開始。非同步callback不可能處在同一事件迴圈中。

簡單總結事件迴圈:

同步**執行 -> 查詢非同步佇列,推入執行棧,執行callback1[事件迴圈1] ->查詢非同步佇列,推入執行棧,執行callback2[事件迴圈2]...

即每個非同步callback,最終都會形成自己獨立的乙個事件迴圈。

結合nexttick的由來,可以推出每個事件迴圈中,nexttick觸發的時機:

同一事件迴圈中的**執行完畢 -> dom 更新 -> nexttick callback觸發

tips:本文的任務佇列、訊息佇列、非同步佇列指同乙個東西,均指macrotask queue。

事件迴圈詳解:

watch:)}}

}

聊聊VUE中的nextTick

在談nexttick之前,先要說明一件事,可能在我們平時使用vue時並沒有關注到,事實上,vue執行的dom更新是非同步的。舉個栗子 此時控制台列印的是數值是0 這時候如果你將 改一下 這時,控制台列印的數值為1000 這也就說明,vue的dom更新是非同步的,官網上是這樣描述的 可能你還沒有注意到...

簡單理解vue中的nextTick

vue是非同步渲染的,當data改變之後,dom不會立刻被渲染,頁面渲染時會將data的修改做整合,多次data修改只會做整合最後一次性渲染出來,這也是非同步渲染的原因。只有非同步渲染才可以實現整合操作。methods 在你的 vue 檢視中,testnum 會發生變化。不過需要注意的是這個變化的過...

vue中的 nextTick的常用思路

vue 實現響應式並不是資料發生變化之後 dom 立即變化,而是按一定的策略進行 dom 的更新。nexttick 是在下次 dom 更新迴圈結束之後執行延遲 在修改資料之後使用 nexttick,則可以在 中獲取更新後的 dom。官網文件 在vue開發中,往往會出現資料已經發生改變,此時想要立即獲...