關于vue中next和Tick(nextTick)的一點理解

mgckid 發布于2019-08-22 18:42 / 1875人閱讀

摘要：為什么叫按照官網的解釋在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。在下個事件循環執行時確實是最新的了，但是回調并沒有在下個事件循環執行。

前言

在這之前我是沒有怎么看過vue源碼的，但是看了源碼后又產生了一些疑問，如果不看源碼我還真沒有任何疑問的去用nextTick，因為我只知道我想獲取更新后的dom我就在里面寫回調，只管寫準沒錯，有天好奇調試了下代碼就發現了一些疑問....

什么時候開始本次Tick?

百度搜索event loops可以看到很多文章，但是看了很多文章都沒讓我知道或者作者沒有去說明什么時候開始第一次tick,不過也幸運，還是有人skycity明確說出了，印象中之前掘金有篇文章我在評論里面也得到過答案，答案就是從全局script開始執行開始第一輪tick

什么時候結束本次Tick?

這個也是我根據搜索資料得出結論，當GUI 渲染完后本輪Tick結束，但是在開始渲染之前js 引擎會執行完所有的微任務隊列，新的叫法是jobs,宏任務叫tasks

一次tick結束之后干嘛？

繼續查找事件任務隊列中是否有tasks，如果沒有就靜靜等待非空，如果有就繼續開始第二輪tick，取出tasks執行
我畫了個圖可以表示下這個過程

這個結論是我目前覺得正確的，希望有覺得不對的地方可以評論討論下。

為什么叫next**?

按照官網的解釋

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

我個人是并不理解這個下次dom更新循環是指的什么?是跟event loop這個事件循環一個意思嗎？本次dom更新循環是什么時候開始?什么時候結束？希望有人知道的解釋下。我覺得執行回調的時機是在下個tick之前執行的，

2018.7.21更新：根絕SHERlocked93大佬的文章參考以及他的回答，nextTick的回調執行時機其實是不確定的，看下面這個圖：

根據上面的圖可以看到最終回調有可能放入兩個隊列，那被執行的時機就有一下可能：
1：放入微任務隊列,則在本輪tick執行
2：放入宏任務隊列，則在下輪tick或者下下輪，或者下n輪
第二種為什么不確定呢？因為不知道放入隊列時前面有幾個任務在排隊，可能以后n個計時器，而宏任務不像微任務一次全部執行完，宏任務是一個tick只執行一個任務，每個任務都在不同的tick,所以時機不定，但是肯定是在本輪tick之后

下面的代碼我只走了支持Promsie的瀏覽器的過程，此時是在本輪tick執行
假設html中有這行代碼

{{msg}}

我們在mounted里面執行

this.msg = "hello";
this.$nextTick(()=>{
    console.log(this.$refs.msg.innerHTML)
})

上述代碼在vue里面的大致如下執行流程如下

通過上面的流程分析，nextTick里面的回調是在當前時間循環內執行的，并沒有在下個事件循環執行。so,在下個事件循環執行時dom確實是最新的了，但是回調并沒有在下個事件循環執行。

總結

1.~~nextTick里面的回調是在本輪tick循環中執行的~~ nextTick里面的回調是在本輪tick或者下n輪tick中執行的(n=1,2,3...)
2.所有的微任務會在本輪tick中全部執行完
3.任何一個宏任務也就是tasks都不在一個tick中執行，而是在不同的tick

參考鏈接：

理解javascript中的事件循環(EventLoop)

Javascript事件循環機制以及渲染引擎何時渲染UI

從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

云服務器 GPU云服務器 vue中 java中orm理解 vue 中使用 webrtc vue中使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96119.html

詳細分析Vue.nextTick()實現

摘要：因為平時使用都是傳回調的，所以很好奇什么情況下會為，去翻看官方文檔發現起新增如果沒有提供回調且在支持的環境中，則返回一個。這就對了，函數體內最后的判斷很明顯就是這個意思沒有回調支持。 Firstly, this paper is based on Vue 2.6.8剛開始接觸Vue的時候，哇nextTick好強，咋就在這里面寫就是dom更新之后，當時連什么macrotask、micro...

DevYK 2019-08-26 13:40 評論0 收藏0
【Vue源碼】Vue中DOM的異步更新策略以及nextTick機制

摘要：本篇文章主要是對中的異步更新策略和機制的解析，需要讀者有一定的使用經驗并且熟悉掌握事件循環模型。這個結果足以說明中的更新并非同步。二是把回調函數放入一個隊列，等待適當的時機執行。通過的主動來觸發的事件，進而把回調函數作為參與事件循環。本篇文章主要是對Vue中的DOM異步更新策略和nextTick機制的解析，需要讀者有一定的Vue使用經驗并且熟悉掌握JavaScript事件循環模型。 ...

selfimpr 2019-08-26 11:46 評論0 收藏0
從Vue.js源碼看異步更新DOM策略及nextTick

摘要：我們發現默認是使用異步執行更新。優先使用，在不存在的情況下使用，這兩個方法的回調函數都會在中執行，它們會比更早執行，所以優先使用。是最后的一種備選方案，它會將回調函數加入中，等到執行。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/ans...

leo108 2019-08-21 16:43 評論0 收藏0
Vue nextTick 機制

摘要：而和的延遲明顯是小于的。因為的事件機制是通過事件隊列來調度執行，會等主進程執行空閑后進行調度，所以先回去等待所有的進程執行完成之后再去一次更新。因為首先觸發了，導致觸發了的，從而將更新操作進入的事件隊列。這種情況會導致順序成為了。背景我們先來看一段Vue的執行代碼： export default { data () { return { msg: 0 ...

Rindia 2019-08-22 16:48 評論0 收藏0