【Vue原理】NextTick - 白話版

zeyu 發布于2019-08-26 18:36 / 3061人閱讀

摘要：通常會做很多判斷來選擇存在的類型，比如判斷等是否存在，而選擇他為微任務類型但是可能宏微任務最后都是，因為他是保守兼容處理。

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關注公眾號也可以吧

【Vue原理】NextTick - 白話版

nextTick 是 Vue 中比較重要的一部分，源碼獨立而簡短，稍作修改就可以拿出來為你的項目服務，我已經有在項目中使用了

想必大家寫 Vue 項目的時候，應該也有使用過 nextTick

一般我是用在數據渲染完畢之后執行某些操作

this.list =[xx,xx,xx]

this.$nextTick(()=>{    

    this.isLoading=false

})

nextTick 按我的理解，就是設置一個回調，用于異步執行

異步執行，比如，就是把你設置的回調放在 setTimeout 中執行，這樣就算異步了，等待當時同步代碼執行完畢再執行

但是，每設置一個 nextTick 就新建一個 setTimeout 又不實際，

畢竟一個 setTimeout 是異步，兩個setTimeout 也是異步，兩個都要等在同步代碼執行完畢之后才執行

那我直接只設置一個 setTimeout 不就好了

那一個 setTimeout 怎么執行多個回調呢？

1 存在回調數組里。每次調用 nextTick，便往數組里面 push 設置的回調

2 只注冊一個 setTimeout，時間為0，用于遍歷回調數組，然后逐個執行子項

3 同步代碼執行完畢，setTimeout 自然會執行

Vue 不止使用 setTimeout

Vue的 nextTick 也是只用setTimeout 嗎，不是的，這里便會涉及到 javascript 的宏微任務

網上有很多寫的很好的關于宏微任務的文章，大家可以去搜索看

關于宏微任務，簡單說一下個人理解

1 兩者區別在于執行權重的問題，微任務優先級要比宏任務高

2 宏任務和微任務合作完成一個 Event Loop

3 執行一個宏任務，便會執行一列微任務。接著執行另一個宏任務...（循環往復，比如一個setTimeout 就是一個宏任務）

Vue 2.4 以前，只使用微任務，因為微任務執行優先級高

Vue 2.5.3 之后，分成了宏任務和微任務，為了解決連續事件帶來的問題，比如冒泡（至于為什么，會有一篇文章說明）

Vue 2.6 ，又只使用微任務，因為想到了其他辦法解決連續事件的問題

Vue 的宏微任務并不算是嚴格意義上的宏微任務，是種兼容的寫法。

通常會做很多判斷來選擇存在的類型，比如判斷 promise 等是否存在，而選擇他為微任務類型

但是可能宏微任務最后都是 setTimeout ，因為他是保守兼容處理。這樣Vue微任務其實是宏任務了

Vue 使用了 nextTick 進行統一更新

你應該知道，即使在 Vue 中多么頻繁地修改數據，最后 Vue 頁面只會更新一次

這是 Vue 和 nextTick 合作產生的結果，但又并不只是 nextTick 起作用

根據響應式原理，你我都知道

【Vue原理】響應式原理 - 白話版

比如

數據 name 被頁面引用，name 會收集到頁面的 watcher

name 被修改時，會通知所有收集到的 watcher 進行更新（watcher.update）

this.name = 2

this.name = 3

this.name = 4

如果

name 一時間被修改三次時，按道理應該會通知三次 watcher 更新，那么頁面會更新三次

但是最后只會更新一次

就是因為他們的合作

設置 nextTick 回調 + 過濾 watcher

當數據變化后，把 watcher.update 函數存放進 nextTick 的回調數組中，并且會做過濾。

通過 watcher.id 來判斷回調數組中是否已經存在這個 watcher 的更新函數

不存在，才 push

之后 nextTick 遍歷回調數組，便會執行了更新

所以

當三次修改數據的時候，會準備 push進回調數組三個 watcher.update，但是只有第一次是 push 成功的，其他的會被過濾掉

所以，不管你修改多少次數據，nextTick 的回調數組中只存在唯一一個 watcher.update，從而頁面只會更新一次

GPU云服務器云服務器 vue安卓版 nextTick() nextTick 白話

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110261.html

【Vue原理】NextTick - 源碼版之服務Vue

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】NextTick - 源碼版之服務Vue 初次看的兄弟可以先看【Vue原理】NextTick - 白話版簡單了解下...

Acceml 2019-08-26 18:36 評論0 收藏0
【Vue原理】NextTick - 源碼版之宏微任務的抉擇

摘要：這么講，有點籠統，準確地說，應該是事件回調執行過程中，在主線程為空之后，異步代碼執行之前，所有通過注冊的異步代碼都是用宏任務。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【...

raise_yang 2019-08-26 18:36 評論0 收藏0
【Vue原理】NextTick - 源碼版之獨立自身

摘要：盡量把所有異步代碼放在一個宏微任務中，減少消耗加快異步代碼的執行。我們知道，如果一個異步代碼就注冊一個宏微任務的話，那么執行完全部異步代碼肯定慢很多避免頻繁地更新。中就算我們一次性修改多次數據，頁面還是只會更新一次。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5...

劉東 2019-08-26 18:36 評論0 收藏0
【Vue原理】響應式原理 - 白話版

摘要：所以我今后打算把每一個內容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應式系統我們都知道，只要在實例中聲明過的數據，那么這個數據就是響應式的。什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 V...

gggggggbong 2019-08-23 18:21 評論0 收藏0
【Vue原理】月老Computed - 白話版

摘要：如果沒有緩存，我們將不可避免的多次執行的現在我們要開始講解，是如何判斷是否使用緩存的首先計算后，會把計算得到的值保存到一個變量中。當使用緩存時，就直接返回這個變量。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或...

Tony_Zby 2019-08-23 18:21 評論0 收藏0