資訊專欄INFORMATION COLUMN
摘要：通常會(huì)做很多判斷來(lái)選擇存在的類型，比如判斷等是否存在，而選擇他為微任務(wù)類型但是可能宏微任務(wù)最后都是，因?yàn)樗潜Ｊ丶嫒萏幚怼?/p>
寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】
如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧
【Vue原理】NextTick - 白話版
nextTick 是 Vue 中比較重要的一部分，源碼獨(dú)立而簡(jiǎn)短，稍作修改就可以拿出來(lái)為你的項(xiàng)目服務(wù)， 我已經(jīng)有在項(xiàng)目中使用了
想必大家寫 Vue 項(xiàng)目的時(shí)候，應(yīng)該也有使用過(guò) nextTick
一般我是用在數(shù)據(jù)渲染完畢之后執(zhí)行某些操作
this.list =[xx,xx,xx]
this.$nextTick(()=>{
this.isLoading=false
})
nextTick 按我的理解，就是設(shè)置一個(gè)回調(diào)，用于異步執(zhí)行
異步執(zhí)行，比如，就是把你設(shè)置的回調(diào)放在 setTimeout 中執(zhí)行，這樣就算異步了，等待當(dāng)時(shí)同步代碼執(zhí)行完畢再執(zhí)行
但是，每設(shè)置一個(gè) nextTick 就新建一個(gè) setTimeout 又不實(shí)際，
畢竟一個(gè) setTimeout 是異步，兩個(gè)setTimeout 也是異步，兩個(gè)都要等在 同步代碼執(zhí)行完畢之后才執(zhí)行
那我直接只設(shè)置一個(gè) setTimeout 不就好了
那一個(gè) setTimeout 怎么執(zhí)行多個(gè)回調(diào)呢？1 存在 回調(diào)數(shù)組 里。每次調(diào)用 nextTick，便往數(shù)組里面 push 設(shè)置的回調(diào)
2 只注冊(cè)一個(gè) setTimeout，時(shí)間為0，用于遍歷 回調(diào)數(shù)組，然后逐個(gè)執(zhí)行子項(xiàng)
3 同步代碼執(zhí)行完畢，setTimeout 自然會(huì)執(zhí)行
Vue 不止使用 setTimeoutVue的 nextTick 也是只用setTimeout 嗎，不是的，這里便會(huì)涉及到 javascript 的 宏微任務(wù)
網(wǎng)上有很多寫的很好的關(guān)于宏微任務(wù)的文章，大家可以去搜索看
關(guān)于宏微任務(wù)，簡(jiǎn)單說(shuō)一下個(gè)人理解
1 兩者區(qū)別在于執(zhí)行權(quán)重的問(wèn)題，微任務(wù)優(yōu)先級(jí)要比宏任務(wù)高
2 宏任務(wù) 和 微任務(wù) 合作完成一個(gè) Event Loop
3 執(zhí)行一個(gè) 宏任務(wù)，便會(huì)執(zhí)行一列微任務(wù)。接著執(zhí)行另一個(gè)宏任務(wù)...（循環(huán)往復(fù)，比如一個(gè)setTimeout 就是一個(gè)宏任務(wù)）
Vue 2.4 以前，只使用 微任務(wù)，因?yàn)槲⑷蝿?wù)執(zhí)行優(yōu)先級(jí)高
Vue 2.5.3 之后，分成了 宏任務(wù) 和 微任務(wù)，為了解決連續(xù)事件帶來(lái)的問(wèn)題，比如冒泡（至于為什么，會(huì)有一篇文章說(shuō)明）
Vue 2.6 ，又只使用微任務(wù)，因?yàn)橄氲搅似渌k法解決連續(xù)事件的問(wèn)題
Vue 的 宏微任務(wù) 并不算是嚴(yán)格意義上的宏微任務(wù)，是種兼容的寫法。
通常會(huì)做很多判斷來(lái)選擇存在的類型，比如判斷 promise 等是否存在，而選擇他為微任務(wù)類型
但是可能宏微任務(wù)最后都是 setTimeout ，因?yàn)樗潜Ｊ丶嫒萏幚?。這樣Vue微任務(wù)其實(shí)是宏任務(wù)了
Vue 使用了 nextTick 進(jìn)行統(tǒng)一更新你應(yīng)該知道，即使在 Vue 中多么頻繁地修改數(shù)據(jù)，最后 Vue 頁(yè)面只會(huì)更新一次
這是 Vue 和 nextTick 合作產(chǎn)生的結(jié)果，但又并不只是 nextTick 起作用
根據(jù)響應(yīng)式原理，你我都知道
【Vue原理】響應(yīng)式原理 - 白話版
比如數(shù)據(jù) name 被 頁(yè)面引用，name 會(huì)收集到 頁(yè)面的 watcher
name 被修改時(shí)，會(huì)通知所有收集到的 watcher 進(jìn)行更新（watcher.update）
this.name = 2 this.name = 3 this.name = 4如果
name 一時(shí)間被修改三次時(shí)，按道理應(yīng)該會(huì)通知三次 watcher 更新，那么頁(yè)面會(huì)更新三次
但是最后只會(huì)更新一次
就是因?yàn)樗麄兊暮献?/b>設(shè)置 nextTick 回調(diào) + 過(guò)濾 watcher
當(dāng)數(shù)據(jù)變化后，把 watcher.update 函數(shù)存放進(jìn) nextTick 的 回調(diào)數(shù)組中，并且會(huì)做過(guò)濾。
通過(guò) watcher.id 來(lái)判斷 回調(diào)數(shù)組 中是否已經(jīng)存在這個(gè) watcher 的更新函數(shù)
不存在，才 push
之后 nextTick 遍歷回調(diào)數(shù)組，便會(huì)執(zhí)行了更新
所以當(dāng)三次修改數(shù)據(jù)的時(shí)候，會(huì)準(zhǔn)備 push進(jìn) 回調(diào)數(shù)組 三個(gè) watcher.update，但是只有第一次是 push 成功的，其他的會(huì)被過(guò)濾掉
所以，不管你修改多少次數(shù)據(jù)，nextTick 的回調(diào)數(shù)組中只存在唯一一個(gè) watcher.update，從而頁(yè)面只會(huì)更新一次
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110261.html
寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】NextTick - 源碼版 之 服務(wù)Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白話版 簡(jiǎn)單了解下...
摘要：這么講，有點(diǎn)籠統(tǒng)，準(zhǔn)確地說(shuō)，應(yīng)該是事件回調(diào)執(zhí)行過(guò)程中，在主線程為空之后，異步代碼執(zhí)行之前，所有通過(guò)注冊(cè)的異步代碼都是用宏任務(wù)。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【...
摘要：盡量把所有異步代碼放在一個(gè)宏微任務(wù)中，減少消耗加快異步代碼的執(zhí)行。我們知道，如果一個(gè)異步代碼就注冊(cè)一個(gè)宏微任務(wù)的話，那么執(zhí)行完全部異步代碼肯定慢很多避免頻繁地更新。中就算我們一次性修改多次數(shù)據(jù)，頁(yè)面還是只會(huì)更新一次。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5...
摘要：所以我今后打算把每一個(gè)內(nèi)容分成白話版和源碼版。有什么錯(cuò)誤的地方，感謝大家能夠指出響應(yīng)式系統(tǒng)我們都知道，只要在實(shí)例中聲明過(guò)的數(shù)據(jù)，那么這個(gè)數(shù)據(jù)就是響應(yīng)式的。什么是響應(yīng)式，也即是說(shuō)，數(shù)據(jù)發(fā)生改變的時(shí)候，視圖會(huì)重新渲染，匹配更新為最新的值。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 V...
摘要：如果沒(méi)有緩存，我們將不可避免的多次執(zhí)行的現(xiàn)在我們要開(kāi)始講解，是如何判斷是否使用緩存的首先計(jì)算后，會(huì)把計(jì)算得到的值保存到一個(gè)變量中。當(dāng)使用緩存時(shí)，就直接返回這個(gè)變量。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或...
閱讀 1283·2023-04-26 01:38
閱讀 1475·2021-11-15 11:39
閱讀 3264·2021-09-22 15:43
閱讀 2665·2019-08-30 15:55
閱讀 2061·2019-08-30 14:17
閱讀 2864·2019-08-29 14:16
閱讀 3075·2019-08-26 18:36
閱讀 2620·2019-08-26 12:19
