vue 你知道nextTick的原理嗎?

2021-10-20 12:12:03 字數 702 閱讀 9800

提到dom的更新是非同步執行的,只要資料發生變化,將會開啟乙個佇列,並緩衝在同一事件迴圈中發生的所有資料變更。如果同乙個 watcher 被多次觸發,只會被推入到佇列中一次。

簡單來說,就是當資料發生變化時,檢視不會立即更新,而是等到同一事件迴圈中所有資料變化完成之後,再統一更新檢視。

關於非同步的解析,可以檢視阮一峰老師的這篇文章,具體來說,非同步執行的執行機制如下。

(1)所有同步任務都在主線程上執行,形成乙個執行棧(execution context stack)。

(2)主線程之外,還存在乙個"任務佇列"(task queue)。只要非同步任務有了執行結果,就在"任務佇列"之中放置乙個事件。

(3)一旦"執行棧"中的所有同步任務執行完畢,系統就會讀取"任務佇列",看看裡面有哪些事件。那些對應的非同步任務,於是結束等待狀態,進入執行棧,開始執行。

(4)主線程不斷重複上面的第三步。

例子://改變資料

vm.message = 'changed'

//想要立即使用更新後的dom。這樣不行,因為設定message後dom還沒有更新

console.log(vm.$el.textcontent) // 並不會得到'changed'

//這樣可以,nexttick裡面的**會在dom更新後執行

vue.nexttick(function())

與歌謠一起通關前端面試題

vue的nextTick的實現

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

Vue裡的nextTick方法

官方解釋 在下次 dom 更新迴圈結束之後執行延遲 在修改資料之後立即使用這個方法,獲取更新後的 dom。自己總結 vue.nexttick callback 當資料發生變化,更新後執行 vue.nexttick callback 當dom發生變化,更新後執行的 例項 message got out...

聊聊VUE中的nextTick

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