簡介

鑒于一些朋友想學(xué)習(xí) vue2 源碼，但一看到源碼就頭痛（比如在下...），這里本著能給別人講會，自己就能學(xué)會的態(tài)度，想開一個(gè)專題，旨在用最簡單的代碼 讓感興趣的朋友了解一些源碼的設(shè)計(jì)思路（重在思路）。當(dāng)然受限于在下技術(shù)水平，若有歧義或不正確的地方還望大佬們及時(shí)指正。

這一節(jié)主要講一下$nextTick 如何實(shí)現(xiàn)的

nextTick 的作用

我們看一下這一段代碼

當(dāng)我們進(jìn)入頁面后 根據(jù)雙向綁定原理（當(dāng)然我們還沒講，如果這個(gè)文章反應(yīng)好后面會補(bǔ)上）的知識 num 每次執(zhí)行++ 時(shí)，其 setter 方法都會執(zhí)行一次，而每次執(zhí)行 setter 時(shí)，都會觸發(fā) watcher 的更新 dom 方法，那執(zhí)行下來，dom 就會被更新 10000 次，很明顯這樣就太低效了。

經(jīng)過簡單思考我們就可以想到，雖然 num 被更新了 10000 次，但我們實(shí)際只想在最后一次更新后，執(zhí)行 dom 的更新，那就意味著想要提升性能，dom 更新就不能是同步的，而應(yīng)該等每次代碼執(zhí)行完畢后，把所有收集到的 watcher 進(jìn)行去重，如演示代碼中，應(yīng)該在每次執(zhí)行 num 的 setter 后，先把觸發(fā)的 watcher 存入隊(duì)列，等代碼執(zhí)行完畢后，對收集到的 watcher 進(jìn)行去重，這里就只保留最后一次的 watcher 更新 dom 即可。

nextTick 的簡單實(shí)現(xiàn)

解析

• （1）首先，nextTick 函數(shù)將回調(diào)函數(shù)封裝在一個(gè)新的函數(shù)中，并將該封裝函數(shù)推入 callbacks 數(shù)組中。
• (2)然后，它會檢查 pending 的狀態(tài)，如果為 false，則表示當(dāng)前沒有執(zhí)行異步更新任務(wù)，需要進(jìn)行異步更新。
• (3)在異步更新中，它會根據(jù)瀏覽器支持情況選擇使用宏任務(wù)（macro task）或微任務(wù)（micro task）。
  如果瀏覽器支持宏任務(wù)，macroTimerFunc 函數(shù)會被調(diào)用，將異步更新任務(wù)推入宏任務(wù)隊(duì)列中，以便在下一個(gè)宏任務(wù)執(zhí)行時(shí)執(zhí)行回調(diào)函數(shù)。
  如果瀏覽器不支持宏任務(wù)，則會調(diào)用 microTimerFunc 函數(shù)，將異步更新任務(wù)推入微任務(wù)隊(duì)列中，以便在下一個(gè)微任務(wù)執(zhí)行時(shí)執(zhí)行回調(diào)函數(shù)。
• （4）最后，如果回調(diào)函數(shù)為 undefined，并且當(dāng)前環(huán)境支持 Promise，則會返回一個(gè) Promise 對象，以便可以使用 await 或 .then() 等方式等待回調(diào)函數(shù)執(zhí)行完成。

以上就是vue $nextTick實(shí)現(xiàn)原理深入詳解的詳細(xì)內(nèi)容，更多關(guān)于vue $nextTick實(shí)現(xiàn)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論