關(guān)于vue組件的更新機(jī)制?resize()?callResize()

更新時(shí)間：2022年04月19日 08:42:26 作者：青檸知秋

這篇文章主要介紹了關(guān)于vue組件的更新機(jī)制?resize()?callResize()，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

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

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

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

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

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

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

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

舉個(gè)例子

當(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ù)更新后，會(huì)調(diào)用 dep.notify 方法，通知 dep 中收集的 watcher 去執(zhí)行 update方法，watcher.update 將 watcher 自己放入一個(gè) watcher 隊(duì)列（全局的 queue 數(shù)組）。

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

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

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

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

您可能感興趣的文章: