簡單的了解下 Vue nextTick 獲取更新后 DOM 的原理
Vue nexTick
使用過Vue的小伙伴們都知道，Vue里的nextTick可以獲取到更新后的DOM, 今天我就來講解下nextTick里面究竟做了什么？
開始講解前，我們需要知道了解一個(gè)概念，那就是Event Loop
Event Loop
Event Loop翻譯過來就是事件循環(huán), 一個(gè)Event Loop會(huì)包括一個(gè)或多個(gè)task隊(duì)列，持續(xù)線程會(huì)從隊(duì)列中取出最早進(jìn)入隊(duì)列的任務(wù)進(jìn)行執(zhí)行，被取出的任務(wù)就叫做macroTask(宏任務(wù)), 每個(gè)macroTask都有一個(gè)任務(wù)源, 每個(gè)macroTask處理完之后就從隊(duì)列中取出下一個(gè)時(shí)間最早進(jìn)入的macroTask再重執(zhí)行
任務(wù)源：
```
1. script
2. 事件
3. Dom交互
4. I/O
5. UI Render
6. setTimeout
7. setInterval
8. requestAnimationFrame
.....
```
也就是說碰到以上幾種情況就會(huì)產(chǎn)生一個(gè)macroTask并且推入到隊(duì)列中
miscroTask(微任務(wù))
執(zhí)行完每個(gè)macroTask之后，主線程會(huì)去檢查該macroTask下的microTask是否為空，如果不為空，則按照時(shí)間順序從早到晚取出，如果途中有遇到新的microTask, 那么會(huì)繼續(xù)將該microTask推入到microTask隊(duì)列里
UI Render(重點(diǎn))
伴隨著miscroTask隊(duì)列的清空，主線程就會(huì)執(zhí)行UI Render, 也就是渲染界面，但是瀏覽器它并不會(huì)每次在UI Render任務(wù)下一定會(huì)渲染界面，視情況而言，現(xiàn)在主流瀏覽器一般都是按照60HZ 也就是16.7ms刷新頻率進(jìn)行渲染(不是精確估量)，一個(gè)macroTask通常是小于16.7ms, 所以瀏覽器每次會(huì)根據(jù)情況進(jìn)行渲染
總結(jié)下一個(gè)循環(huán)
1. 從macroTask隊(duì)列里取出最早添加進(jìn)去的
2. 開始執(zhí)行task, 途中如果遇到新的macroTask，就會(huì)將其添加到macroTask隊(duì)列的最后面
3. 執(zhí)行完macroTask之后，event loop會(huì)去尋找microTask隊(duì)列
4. 同樣的道理，如果途中遇到新的microTask，將其放入該macroTask下的microTask隊(duì)列最后面
5. 執(zhí)行完microTask，會(huì)執(zhí)行UI Render macroTask
6. 瀏覽器會(huì)根據(jù)現(xiàn)有情況決定是否更新DOM，通常是按照60HZ的頻率去更新
7. 至此，一個(gè)event loop結(jié)束了
nextTick
我們開始分析nextTick
根據(jù)上圖
我們看到nextTick的幾種寫法:
1. this.$nextTick(cb)
2. this.$nextTick().then(cb)
所有的cb都會(huì)被放入到callbacks數(shù)組里，等待一次性調(diào)用
上圖中我們看到了主要是由timerFunc這個(gè)函數(shù)來進(jìn)行調(diào)用回調(diào), 那么我們下面來著重介紹這個(gè)函數(shù)，首先看下源碼
我們可以看到timerFunc在不同情況下不同的賦值情況
首先會(huì)判斷瀏覽器是否支持promise屬性, 如果支持, timerFunc就會(huì)被賦值成Promise， 這里有個(gè)小小的問題，那就是在ios下，雖然是具備Pormise對(duì)象，并且會(huì)將它推入到microTask隊(duì)列里，但是隊(duì)列卻不會(huì)更新，這個(gè)時(shí)候需要添加一個(gè)macroTask來強(qiáng)制刷新microTask隊(duì)列
MutationObserver, 相信很多人并不清楚這個(gè)Api, 這是一個(gè)能夠監(jiān)聽DOM變化的API，并且屬于microTask, 優(yōu)先級(jí)低于Promise 在創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)后，手動(dòng)更改其文本節(jié)點(diǎn)來觸發(fā)microTask,
這里會(huì)有個(gè)小小的問題：
該文本節(jié)點(diǎn)渲染成功后,一定能代表其他的DOM渲染成功了嗎？
這是個(gè)備選方案, 主要還是因?yàn)樗且粋€(gè)微任務(wù)，所以才使用它，并不是因?yàn)樗O(jiān)聽了DOM
微任務(wù)都失敗后， 退而求其次，選擇setImmediate, 這是一個(gè)只有高版本IE和Edge瀏覽器才可能擁有的API, 其主要是用于計(jì)算大量數(shù)據(jù)的時(shí)候使用
最后就是setTimeout
看到這里，你會(huì)不會(huì)有疑惑？
上面的代碼并沒有說明nextTick是在監(jiān)聽DOM更新后才執(zhí)行的？What????當(dāng)時(shí)腦袋就duang了一下
那么接下來說的就是重中之重
DOM Tree的更新是實(shí)時(shí)的，DOM Tree的更新是實(shí)時(shí)的，DOM Tree的更新是實(shí)時(shí)的， 重要的事說3遍， 這意味著你無需去監(jiān)聽DOM 更新， 你對(duì)DOM的操作是能夠?qū)崟r(shí)得到反饋的，上一行代碼操作了DOM，下一行就能獲取到
那么有人就會(huì)產(chǎn)生疑惑了， nextTick究竟是干嘛的?
nextTick的作用是將收集Watcher從隊(duì)列中一個(gè)個(gè)取出，并且更改數(shù)據(jù)，來一次性渲染DOM, 我們知道操作DOM的代價(jià)是昂貴的， 瀏覽器打開一個(gè)網(wǎng)頁后會(huì)開啟一個(gè)進(jìn)程，進(jìn)程是由線程組成的， 那么在打開的同時(shí)，
1. GUI渲染線程
2. js引擎線程(主線程)
3. EventLoop輪訓(xùn)處理線程
4. 其他線程，例如網(wǎng)絡(luò)
跨線程操作代價(jià)是昂貴的，所以做到一次性渲染Dom,可以有效的優(yōu)化性能！！
總結(jié)
nextTick并不是用來監(jiān)聽DOM變更，因?yàn)镈OM變更是能夠?qū)崟r(shí)獲取到的，它的作用是一次性更改數(shù)據(jù)，并且渲染DOM。