組件的更新機制 resize() callResize()

假設(shè)有一段代碼，通過isCollapse改變觸發(fā)ref的子組件child觸發(fā)方法resize()，借著觸發(fā)callResize()方法。

這是vue組件的更新機制。

子組件是child，父組件是整個界面 ，在父組件上任意觸發(fā)監(jiān)聽，調(diào)用方法resize()；

resize()調(diào)用callResize()，callResize()把下面的3個方法的resize()一次調(diào)用。

循環(huán)遍歷  父觸發(fā)，父親告訴子 resize  子告訴孫 resize。沒有孫子，就調(diào)用停止。

想一個樹形結(jié)構(gòu)，導(dǎo)航菜單，點擊導(dǎo)航菜單，切換對應(yīng)界面。保證每個節(jié)點都跟著刷新。

就是說，父組件更新了，它的子組件，孫組件都要更新。子組件變化了，它引用的所有組件都要更新。

舉個例子

當(dāng)GlobalHeader中的logo屬性發(fā)生變化，那么第二張圖的這些組件都要更新。

異步更新機制是如何實現(xiàn)的

Vue的異步更新機制的核心是利用了瀏覽器的異步任務(wù)隊列來實現(xiàn)的，首選微任務(wù)隊列，宏任務(wù)隊列次之。

當(dāng)響應(yīng)式數(shù)據(jù)更新后，會調(diào)用 dep.notify 方法，通知 dep 中收集的 watcher 去執(zhí)行 update方法，watcher.update 將 watcher 自己放入一個 watcher 隊列（全局的 queue 數(shù)組）。

然后通過 nextTick 方法將一個刷新 watcher 隊列的方法（flushSchedulerQueue）放入一個全局的callbacks 數(shù)組中。

如果此時瀏覽器的異步任務(wù)隊列中沒有一個叫 flushCallbacks 的函數(shù)，則執(zhí)行 timerFunc 函數(shù)，將 flushCallbacks 函數(shù)放入異步任務(wù)隊列。如果異步任務(wù)隊列中已經(jīng)存在 flushCallbacks 函數(shù)，等待其執(zhí)行完成以后再放入下一個 flushCallbacks 函數(shù)。 flushCallbacks 函數(shù)負(fù)責(zé)執(zhí)行 callbacks數(shù)組中的所有 flushSchedulerQueue 函數(shù)。

flushSchedulerQueue 函數(shù)負(fù)責(zé)刷新 watcher 隊列，即執(zhí)行 queue 數(shù)組中每一個 watcher 的 run 方法，從而進(jìn)入更新階段，比如執(zhí)行組件更新函數(shù)或者執(zhí)行用戶 watch 的回調(diào)函數(shù)。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論