聊聊VUE中的nextTick

2022-07-04 19:27:14 字數 574 閱讀 3563

在談nexttick之前,先要說明一件事,可能在我們平時使用vue時並沒有關注到,事實上,vue執行的dom更新是非同步的

舉個栗子:

}

此時控制台列印的是數值是0;這時候如果你將**改一下:

}

這時,控制台列印的數值為1000;這也就說明,vue的dom更新是非同步的,官網上是這樣描述的:

可能你還沒有注意到,vue 非同步執行 dom 更新。只要觀察到資料變化,vue 將開啟乙個佇列,並緩衝在同一事件迴圈中發生的所有資料改變。如果同乙個 watcher 被多次觸發,只會一次推入到佇列中。這種在緩衝時去除重複資料對於避免不必要的計算和 dom 操作上非常重要。然後,在下乙個的事件迴圈「tick」中,vue 重新整理佇列並執行實際 (已去重的) 工作。

而這次要談的nexttick,其實就是上面settimeout,目的也很簡單,就是為了讓dom更新後立即執行乙個**函式:

}

控制台也會列印1000!

簡單理解vue中的nextTick

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

vue中的 nextTick的常用思路

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

vue的nextTick的實現

vue的nexttick是用瀏覽器支援的方法模擬nodejs的process.nexttick 老版本的vue用如下方法來模擬 promise.then mutationobserver mutationobserver由於相容性原因被下課 settimeout fn,0 新版本的vue用如下方法來...