石頭智能洗地機(jī)A10 Plus體驗(yàn)：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請(qǐng)假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機(jī)A10 Plus。從這個(gè)產(chǎn)品名上就不難看出，這次石頭推出的并不是常見的掃地機(jī)器
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~
我發(fā)現(xiàn)很多人背八股文真的背傻了，只知道 nextTick = 微任務(wù)，其他啥都不知道，也不去了解原因，甚至大部分理解的都是錯(cuò)的？
先來回顧下nextTick的使用，因?yàn)?Vue 的響應(yīng)式變量是異步更新DOM的，所以當(dāng)你變量修改的時(shí)候，并不能第一時(shí)間拿到最新的 DOM，而在nextTick中就可以拿到最新的 DOM
圖片
很多人認(rèn)為 nextTick = 微任務(wù)，這其實(shí)是錯(cuò)的，正確應(yīng)該是 nextTick 優(yōu)先是 微任務(wù)，不信可以直接看 Vue 的源碼
在src/core/util/next-tick.ts 文件中，可以看到 nextTick 優(yōu)先級(jí)如下：
圖片
所以說 nextTick 只是優(yōu)先選擇微任務(wù)而已，當(dāng)瀏覽器不支持微任務(wù)的時(shí)候，它還是會(huì)選擇宏任務(wù)
2023年面試了怎么也得有100個(gè)人了，大部分都不能比較好的回答這個(gè)問題：nextTick為啥優(yōu)先選擇微任務(wù)？
首先聲明一個(gè)點(diǎn)：Vue 的異步更新DOM 其實(shí)也是微任務(wù)，比如下面的例子，你一次性更新了三次變量，其實(shí)會(huì)生成三個(gè)更新DOM微任務(wù)到隊(duì)列中
圖片
你這個(gè)時(shí)候放一個(gè) nextTick 在后面，那就是在三個(gè)微任務(wù)后面再放一個(gè)微任務(wù)而已
圖片
我們都知道微任務(wù)是在UI渲染之前執(zhí)行的，那為什么 nextTick 能拿到最新的 DOM 呢？
圖片
其實(shí)我們要明白一個(gè)點(diǎn)：更新 ≠ 渲染，前面三個(gè)更新微任務(wù)只是更新DOM，修改的是DOM樹，而使用 document.getElementById這類方法去獲取到的就是DOM樹的內(nèi)容
圖片
所以 nextTick 為什么是微任務(wù)，但是能獲取到最新DOM呢？因?yàn)榈搅?nextTick 這一步的時(shí)候，DOM樹已經(jīng)更新完了，只是還沒渲染到頁面上而已，而我們能通過DOM的一些API去獲取到最新的DOM樹內(nèi)容，比如 document.getElementById 這類方法
所以，與其說 nextTick 能獲取到最新的DOM，還不如說 nextTick 能獲取到最新的DOM樹信息
本文鏈接：http://m.www897cc.com/showinfo-26-73790-0.htmlNextTick 在 Vue 中如何發(fā)揮作用的？其實(shí)大部分人一知半解
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 圖文講透Golang標(biāo)準(zhǔn)庫 net/http實(shí)現(xiàn)原理 - 客戶端
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)