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

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

這是vue組件的更新機(jī)制。

子組件是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)航菜單，點(diǎn)擊導(dǎo)航菜單，切換對應(yīng)界面。保證每個節(jié)點(diǎn)都跟著刷新。

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

舉個例子

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

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

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

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

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

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

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

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