大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎(chǔ)是進階的前提是我的初心~kyl28資訊網(wǎng)——每日最新資訊28at.com

背景

我發(fā)現(xiàn)很多人背八股文真的背傻了，只知道 nextTick = 微任務(wù)，其他啥都不知道，也不去了解原因，甚至大部分理解的都是錯的？kyl28資訊網(wǎng)——每日最新資訊28at.com

先來回顧下nextTick的使用，因為 Vue 的響應(yīng)式變量是異步更新DOM的，所以當你變量修改的時候，并不能第一時間拿到最新的 DOM，而在nextTick中就可以拿到最新的 DOMkyl28資訊網(wǎng)——每日最新資訊28at.com

圖片kyl28資訊網(wǎng)——每日最新資訊28at.com

先問是不是，再問為什么

很多人認為 nextTick = 微任務(wù)，這其實是錯的，正確應(yīng)該是 nextTick 優(yōu)先是 微任務(wù)，不信可以直接看 Vue 的源碼kyl28資訊網(wǎng)——每日最新資訊28at.com

在src/core/util/next-tick.ts 文件中，可以看到 nextTick 優(yōu)先級如下：kyl28資訊網(wǎng)——每日最新資訊28at.com

• Promise.resolve().then：微任務(wù)
• MutationObserver：宏任務(wù)
• setImmediate：宏任務(wù)
• setTimeout：宏任務(wù)

圖片kyl28資訊網(wǎng)——每日最新資訊28at.com

所以說 nextTick 只是優(yōu)先選擇微任務(wù)而已，當瀏覽器不支持微任務(wù)的時候，它還是會選擇宏任務(wù)kyl28資訊網(wǎng)——每日最新資訊28at.com

為啥優(yōu)先微任務(wù)？

2023年面試了怎么也得有100個人了，大部分都不能比較好的回答這個問題：nextTick為啥優(yōu)先選擇微任務(wù)？kyl28資訊網(wǎng)——每日最新資訊28at.com

首先聲明一個點：Vue 的異步更新DOM 其實也是微任務(wù)，比如下面的例子，你一次性更新了三次變量，其實會生成三個更新DOM微任務(wù)到隊列中kyl28資訊網(wǎng)——每日最新資訊28at.com

圖片kyl28資訊網(wǎng)——每日最新資訊28at.com

你這個時候放一個 nextTick 在后面，那就是在三個微任務(wù)后面再放一個微任務(wù)而已kyl28資訊網(wǎng)——每日最新資訊28at.com

圖片kyl28資訊網(wǎng)——每日最新資訊28at.com

我們都知道微任務(wù)是在UI渲染之前執(zhí)行的，那為什么 nextTick 能拿到最新的 DOM 呢？kyl28資訊網(wǎng)——每日最新資訊28at.com

圖片kyl28資訊網(wǎng)——每日最新資訊28at.com

更新 ≠ 渲染

其實我們要明白一個點：更新 ≠ 渲染，前面三個更新微任務(wù)只是更新DOM，修改的是DOM樹，而使用 document.getElementById這類方法去獲取到的就是DOM樹的內(nèi)容kyl28資訊網(wǎng)——每日最新資訊28at.com

圖片kyl28資訊網(wǎng)——每日最新資訊28at.com

所以 nextTick 為什么是微任務(wù)，但是能獲取到最新DOM呢？因為到了 nextTick 這一步的時候，DOM樹已經(jīng)更新完了，只是還沒渲染到頁面上而已，而我們能通過DOM的一些API去獲取到最新的DOM樹內(nèi)容，比如 document.getElementById 這類方法kyl28資訊網(wǎng)——每日最新資訊28at.com

所以，與其說 nextTick 能獲取到最新的DOM，還不如說 nextTick 能獲取到最新的DOM樹信息kyl28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-73790-0.htmlNextTick 在 Vue 中如何發(fā)揮作用的？其實大部分人一知半解

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 圖文講透Golang標準庫 net/http實現(xiàn)原理 - 客戶端

下一篇： 輕松實現(xiàn) SpringBoot 中的隱私數(shù)據(jù)脫敏處理