資訊專欄INFORMATION COLUMN
摘要：為什么叫按照官網(wǎng)的解釋在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的。在下個事件循環(huán)執(zhí)行時確實是最新的了，但是回調(diào)并沒有在下個事件循環(huán)執(zhí)行。
前言
在這之前我是沒有怎么看過vue源碼的，但是看了源碼后又產(chǎn)生了一些疑問，如果不看源碼我還真沒有任何疑問的去用nextTick，因為我只知道我想獲取更新后的dom我就在里面寫回調(diào)，只管寫準(zhǔn)沒錯，有天好奇調(diào)試了下代碼就發(fā)現(xiàn)了一些疑問....
什么時候開始本次Tick?百度搜索event loops可以看到很多文章，但是看了很多文章都沒讓我知道或者作者沒有去說明什么時候開始第一次tick,不過也幸運，還是有人skycity明確說出了，印象中之前掘金有篇文章我在評論里面也得到過答案，答案就是從全局script開始執(zhí)行開始第一輪tick
什么時候結(jié)束本次Tick?這個也是我根據(jù)搜索資料得出結(jié)論，當(dāng)GUI 渲染完后本輪Tick結(jié)束，但是在開始渲染之前js 引擎會執(zhí)行完所有的微任務(wù)隊列，新的叫法是jobs,宏任務(wù)叫tasks
一次tick結(jié)束之后干嘛？繼續(xù)查找事件任務(wù)隊列中是否有tasks，如果沒有就靜靜等待非空，如果有就繼續(xù)開始第二輪tick，取出tasks執(zhí)行
我畫了個圖可以表示下這個過程
這個結(jié)論是我目前覺得正確的，希望有覺得不對的地方可以評論討論下。
為什么叫next**?按照官網(wǎng)的解釋
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。
我個人是并不理解這個下次dom更新循環(huán)是指的什么?是跟event loop這個事件循環(huán)一個意思嗎？本次dom更新循環(huán)是什么時候開始?什么時候結(jié)束？希望有人知道的解釋下。我覺得執(zhí)行回調(diào)的時機(jī)是在下個tick之前執(zhí)行的，
2018.7.21更新：根絕SHERlocked93大佬的文章參考以及他的回答，nextTick的回調(diào)執(zhí)行時機(jī)其實是不確定的，看下面這個圖：
根據(jù)上面的圖可以看到最終回調(diào)有可能放入兩個隊列，那被執(zhí)行的時機(jī)就有一下可能：
1：放入微任務(wù)隊列,則在本輪tick執(zhí)行
2：放入宏任務(wù)隊列，則在下輪tick或者下下輪，或者下n輪
第二種為什么不確定呢？因為不知道放入隊列時前面有幾個任務(wù)在排隊，可能以后n個計時器，而宏任務(wù)不像微任務(wù)一次全部執(zhí)行完，宏任務(wù)是一個tick只執(zhí)行一個任務(wù)，每個任務(wù)都在不同的tick,所以時機(jī)不定，但是肯定是在本輪tick之后
下面的代碼我只走了支持Promsie的瀏覽器的過程，此時是在本輪tick執(zhí)行
假設(shè)html中有這行代碼 {{msg}} 我們在mounted里面執(zhí)行
this.msg = "hello";
this.$nextTick(()=>{
console.log(this.$refs.msg.innerHTML)
})
上述代碼在vue里面的大致如下執(zhí)行流程如下
通過上面的流程分析，nextTick里面的回調(diào)是在當(dāng)前時間循環(huán)內(nèi)執(zhí)行的，并沒有在下個事件循環(huán)執(zhí)行。so,在下個事件循環(huán)執(zhí)行時dom確實是最新的了，但是回調(diào)并沒有在下個事件循環(huán)執(zhí)行。
總結(jié)1.nextTick里面的回調(diào)是在本輪tick循環(huán)中執(zhí)行的 nextTick里面的回調(diào)是在本輪tick或者下n輪tick中執(zhí)行的(n=1,2,3...)
2.所有的微任務(wù)會在本輪tick中全部執(zhí)行完
3.任何一個宏任務(wù)也就是tasks都不在一個tick中執(zhí)行，而是在不同的tick
理解javascript中的事件循環(huán)(EventLoop)
Javascript事件循環(huán)機(jī)制以及渲染引擎何時渲染UI
從瀏覽器多進(jìn)程到JS單線程，JS運行機(jī)制最全面的一次梳理
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96119.html
摘要：因為平時使用都是傳回調(diào)的，所以很好奇什么情況下會為，去翻看官方文檔發(fā)現(xiàn)起新增如果沒有提供回調(diào)且在支持的環(huán)境中，則返回一個。這就對了，函數(shù)體內(nèi)最后的判斷很明顯就是這個意思沒有回調(diào)支持。 Firstly, this paper is based on Vue 2.6.8剛開始接觸Vue的時候，哇nextTick好強(qiáng)，咋就在這里面寫就是dom更新之后，當(dāng)時連什么macrotask、micro...
摘要：本篇文章主要是對中的異步更新策略和機(jī)制的解析，需要讀者有一定的使用經(jīng)驗并且熟悉掌握事件循環(huán)模型。這個結(jié)果足以說明中的更新并非同步。二是把回調(diào)函數(shù)放入一個隊列，等待適當(dāng)?shù)臅r機(jī)執(zhí)行。通過的主動來觸發(fā)的事件，進(jìn)而把回調(diào)函數(shù)作為參與事件循環(huán)。 本篇文章主要是對Vue中的DOM異步更新策略和nextTick機(jī)制的解析，需要讀者有一定的Vue使用經(jīng)驗并且熟悉掌握J(rèn)avaScript事件循環(huán)模型。 ...
摘要：我們發(fā)現(xiàn)默認(rèn)是使用異步執(zhí)行更新。優(yōu)先使用，在不存在的情況下使用，這兩個方法的回調(diào)函數(shù)都會在中執(zhí)行，它們會比更早執(zhí)行，所以優(yōu)先使用。是最后的一種備選方案，它會將回調(diào)函數(shù)加入中，等到執(zhí)行。 寫在前面 因為對Vue.js很感興趣，而且平時工作的技術(shù)棧也是Vue.js，這幾個月花了些時間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。文章的原地址：https://github.com/ans...
摘要：而和的延遲明顯是小于的。因為的事件機(jī)制是通過事件隊列來調(diào)度執(zhí)行，會等主進(jìn)程執(zhí)行空閑后進(jìn)行調(diào)度，所以先回去等待所有的進(jìn)程執(zhí)行完成之后再去一次更新。因為首先觸發(fā)了，導(dǎo)致觸發(fā)了的，從而將更新操作進(jìn)入的事件隊列。這種情況會導(dǎo)致順序成為了。 背景 我們先來看一段Vue的執(zhí)行代碼： export default { data () { return { msg: 0 ...
閱讀 3653·2021-09-27 13:35
閱讀 3622·2019-08-29 17:09
閱讀 2516·2019-08-26 11:30
閱讀 760·2019-08-26 10:32
閱讀 610·2019-08-26 10:23
閱讀 1264·2019-08-26 10:20
閱讀 3220·2019-08-23 15:26
閱讀 3687·2019-08-23 14:33
