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