關於vue中next和Tick(nextTick)的分析

這篇文章主要介紹了關於vue中next和Tick(nextTick)的分析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

在這之前我是沒有怎麼看過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之前執行的，可以看下面的代碼
假設html中有這行代碼<p ref="msg">{{msg}}</p>
我們在mounted裡面執行

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

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

通過上面的流程分析，nextTick裡面的回調是在目前時間迴圈內執行的，並沒有在下個事件迴圈執行。so,在下個事件迴圈執行時dom確實是最新的了，但是回調並沒有在下個事件迴圈執行。

總結

1.nextTick裡面的回調是在本輪tick迴圈中執行的
2.所有的微任務會在本輪tick中全部執行完
3.任何一個宏任務也就是tasks都不在一個tick中執行，而是在不同的tick

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

相關推薦：

如何使用Vue+Mock.js來搭建前端的隔離式開發環境

vue內建群組件transition的詳解（圖文）