Vue3taskscheduler调度器源码分析

scheduler浠诲姟璋冨害鍣ㄤ紡绗旓細schedler婧愮爜铏界劧鍙湁200澶氳锛屼絾鏄秹鍙婂埌缁勪欢鏇存柊鍓嶅悗鍜屾洿鏂拌繃绋嬩腑鎵ц鐨勬墍鏈夈€愪换鍔°€戙€傘€愪换鍔°€戣繖閲屾瘮杈冩娊璞★紝姣旇緝闅剧悊瑙ｃ€傚垢杩愮殑鏄紝鎴戜滑宸茬粡浜嗚В浜嗕笂涓€绡囨枃绔犱腑鐨勪竴涓换鍔★細watchEffect銆傛垜浠彲浠ョ粨鍚堣繖涓綔涓氭潵鍒嗘瀽璋冨害鍣ㄣ€傚湪鍚庣画鐨勬枃绔犱腑锛屾垜浠湪璁茶В鏇存柊闃舵鐨勬椂鍊欙紝浼氬洖杩囧ご鏉ュ啀鐪嬩竴涓嬭皟搴﹀櫒銆傞偅涔堜綘灏变細鏄庣櫧寰堝銆傜洿濂斾富棰橈細璋冨害鍣ㄥ湪鎵ц浠诲姟鐨勮繃绋嬩腑锛屼富瑕佸皢浠诲姟鍒嗕负涓変釜闃舵锛屾瘡涓樁娈垫湁涓ょ鐘舵€侊細棰勫埛鏂伴樁娈点€佸埛鏂伴樁娈点€佸埛鏂板悗闃舵锛屾瘡涓€涓猻tage鏈変袱绉嶇姸鎬侊細inprogress绛夊緟鍒锋柊姣忔鍒锋柊锛岄€氳繃Promise.resolve鍚姩涓€涓猰icrotask锛岃皟鐢╢lushJob鍑芥暟锛屽厛鎵ц棰勫埛鏂板伐浣滐紝鐩村埌棰勫洖璋冧换鍔℃睜涓虹┖锛屽埛鏂板綋鍓嶄换鍔￠槦鍒楋紝骞跺畬鎴愬綋鍓嶄换鍔￠槦鍒楃殑鍒锋柊锛屾渶鍚庡埛鏂板洖璋冨悗浠诲姟姹狅紝浠ユ绫绘帹锛岀洿鍒颁笁涓换鍔℃睜涓殑鍥炶皟鍏ㄩ儴鍒锋柊銆傚湪璁茶Вwatch鐨勬椂鍊欙紝鎴戜滑璇磋繃watcheffect浼氬湪缁勪欢鏇存柊涔嬪墠鎵ц銆傝繖涓窡鑷畾涔夊壇浣滅敤鍑芥暟閰嶇疆椤筬ulsh鏈夊叧銆俧lush锛歱re锛岄粯璁ゅ€笺€倃atchEffect鐨刦lush鏄湪鍒涘缓watch鏃秔re璋冪敤queuePreFlushCb(job)锛屽皢sideeffect鍑芥暟push鍒皃endingPreFlushCbs銆傚綋缁勪欢闇€瑕佹洿鏂版椂锛屼細鍏堥亶鍘嗗苟鎵цpendingPreFlushCbs姹犱腑鐨勫洖璋冿紝鍦ㄧ粍浠舵洿鏂板墠杩涜鍒锋柊銆?鍏呭疄锛氶偖瀵勩€傚彲閫変絾涓嶆帹鑽愩€傚綋watcheffect鐨刦lush璁剧疆涓簆ost鏃讹紝浼氳皟鐢╭ueuePostFlushCb鍑芥暟锛屽皢sideeffect鍑芥暟push鍒皃endingPostFlushCbs銆傞槦鍒椾腑鐨勪换鍔℃墽琛屽畬姣曞悗锛屼細閬嶅巻pendingPostFlushCbs涓殑浠诲姟锛屽疄鐜扮粍浠朵腑鐨剈pdate銆傚埛鏂板悗鎴戜滑鐪嬩竴涓嬭繖娈电浉鍏充唬鐮侊細//pre-updaterelatedconstpendingPreFlushCbs=[]letactivePreFlushCbs=nullletpreFlushIndex=0//post-updaterelatedconstpendingPostFlushCbs=[]letactivePostFlushCbs=nullletpostFlushIndex=0functionqueuePreFlushCb(cb){queueCb(cb,activePreFlushCbs,pendingPreFlushCbs,preFlushIndex)}functionqueuePostFlushCb(cb){queueCb(cb,activePostFlushCbs,pendingPostFlushCbs,postFlushIndex)}functionqueueCb(cb,activeQueue,pendingQueue,index){濡傛灉(!isArray(cb)){//cb涓嶆槸鏁扮粍if(!activeQueue||!activeQueue.includes(cb,(cbasSchedulerJob).allowRecurse?index+1:index)){//activeQueue涓嶅瓨鍦▅|fromindex+1positionstartactiveQueuedoesnotcontaincb//watchjob浼氳繘鏉endingQueue.push(cb)}}else{//濡傛灉cb鏄竴涓暟缁勶紝瀹冩槸涓€涓粍浠剁敓鍛藉懆鏈熼挬瀛愶紝鍙兘琚竴涓猨ob瑙﹀彂,//浣滀笟宸茬粡鍦ㄤ富闃熷垪涓秷闄ら噸澶嶉」,鎵€浠ユ垜浠彲浠ヨ烦杩囪繖閲岀殑閲嶅妫€鏌ヤ互鎻愰珮鎬ц兘鎺ㄩ€佷换鍔＄殑涓昏鍔熻兘鏄痲ueueCb鍑芥暟锛宷ueueCb鍑芥暟涓昏璐熻矗浠诲姟鐨勫垽鏂€傚綋浠诲姟鏄暟缁勬椂锛屼細鐩存帴瑙ｆ瀯鍒伴槦鍒椾腑鎵ц銆傚綋浠诲姟涓嶆槸鏁扮粍鏃讹紝闇€瑕佸垽鏂换鍔°€傛帹閫佷换鍔′笉鑳藉瓨鍦ㄤ簬姝ｅ湪鎵ц鐨勪换鍔￠槦鍒椾腑锛屽惁鍒欏綋鍓嶇殑queueFlush鍑芥暟浼氬湪娌℃湁鎵ц鐨勪换鍔￠槦鍒楀熬閮ㄨ璋冪敤銆俼ueueFlush鍑芥暟浼氭牴鎹綋鍓嶇姸鎬佽繘琛屽垽鏂紝鍙湁鍦ㄦ湭鍒锋柊鍜屼笉绛夊緟鍒锋柊鐨勭姸鎬佷笅鎵嶄細鍒ゆ柇銆傚彧鏈夎繖鏍凤紝microtask鎵嶄細閫氳繃Promise.resolve鍚姩锛岄槦鍒楁墠浼氳鍒锋柊銆傜湅queueFlush鐨勪唬鐮侊細//FlushingthequeuefunctionqueueFlush(){//濡傛灉娌℃湁flushing&&waitingtobeflush//鐒跺悗鎵цflushJobsif(!isFlushing&&!isFlushPending){//WaitingtobeflushingisFlushPending=true//鍚姩寰换鍔″苟寮€濮嬪埛鏂颁换鍔￠槦鍒椼€?/FlushJobs鎵ц缁撴潫锛屽皢promise璧嬪€肩粰currentFlushPromisecurrentFlushPromise=resolvedPromise.then(flushJobs)}}褰搈icrotask寮€濮嬪埛鏂伴槦鍒楁椂锛宨sFlushPending=true锛岃〃绀烘鍦ㄧ瓑寰呭埛鏂般€傚綋鍓嶅畯浠诲姟鎵ц缁撴潫鍚庯紝浼氭墽琛屽搴旂殑寰换鍔￠槦鍒楋紝姝ゆ椂浼氳皟鐢╢lushJobs鍑芥暟銆傚紑濮嬪埛鏂伴槦鍒椼€傛垜浠笉浼氬叧娉ㄥ綋鍓嶇殑瀹忚浠诲姟銆傞鍏堣鐭ラ亾锛屾瘡涓€涓畯浠诲姟閮戒細瀵瑰簲涓€涓井浠诲姟闃熷垪锛屽畯浠诲姟鎵ц瀹屾垚鍚庝細鎵ц瀵瑰簲鐨勫井浠诲姟闃熷垪銆傝繖灏辨槸Vue鎻愬埌鐨勩€愰伩鍏嶅悓涓€涓€滄淮绛斺€濅腑澶氭鐘舵€佸彉鍖栭€犳垚涓嶅繀瑕佺殑閲嶅璋冪敤锛屽紓姝ュ埛鏂扮敤鎴蜂晶鏁堟灉鍑芥暟銆慺unctionflushJobs(seen?:CountMap){//馃憠绛夊緟鍒锋柊缁撴潫锛屽紑濮嬪啿娲梚sFlushPending=falseisFlushing=trueif(__DEV__){seen=seen||newMap()}//馃憠pre-flush寮€濮嬩綔涓歠lushPreFlushCbs(seen)//馃憠pre-flush缁撴潫//鍒锋柊鍓嶆帓搴忛槦鍒椼€?/杩欑‘淇濓細//1.缁勪欢浠庣埗绾ф洿鏂板埌瀛愮骇銆傦紙鍥犱负鐖剁粍浠舵€绘槸//鍦ㄥ瓙缁勪欢涔嬪墠鍒涘缓锛屾墍浠ュ畠鐨勬覆鏌撴晥鏋滃皢鍏锋湁鏇村皬鐨?/浼樺厛绾ф暟锛?/2.濡傛灉缁勪欢鍦ㄧ埗缁勪欢鏇存柊鏈熼棿琚嵏杞斤紝鍒欏彲浠ヨ烦杩囧叾鏇存柊銆?/馃憠鍒锋柊鍓嶅闃熷垪杩涜鎺掑簭//1.淇濊瘉缁勪欢鐨勬洿鏂伴『搴忔槸浠庣埗缁勪欢鍒板瓙缁勪欢锛堝洜涓虹埗缁勪欢鎬绘槸鍦ㄥ瓙缁勪欢涔嬪墠鍒涘缓鐨勶紝鎵€浠ュ叾娓叉煋鍓綔鐢ㄧ殑浼樺厛绾т細鏇村皬锛?/2.濡傛灉鍦ㄧ埗缁勪欢鏇存柊鐨勮繃绋嬩腑鍗歌浇浜嗗瓙缁勪欢锛屽垯鍙互璺宠繃瀛愮粍浠剁殑鏇存柊銆俼ueue.sort((a,b)=>getId(a)-getId(b))try{for(flushIndex=0;flushIndexgetId(a)-getId(b))for(postFlushIndex=0;postFlushIndex=Promise.resolve()letcurrentFlushPromise:Promise|null=nullfunctionnextTick(this:ComponentPublicInstance|void,fn?:()=>void):Promise{constp=currentFlushPromise||resolvedPromise杩斿洖fn锛焢.then(this?fn.bind(this):fn):p}鍏跺疄鎴戠悊瑙cheduler鐨勮皟搴﹁繃绋嬶紝nextTick寰堝ソ鐞嗚В銆傛€荤粨閫氳繃鍒嗘瀽锛屾垜浠煡閬揤ue3涓殑scheduler浠诲姟璋冨害鍣ㄥ湪鎵ц浠诲姟鐨勮繃绋嬩腑涓昏鍒嗕负涓変釜闃舵锛屽埛鏂板墠闃舵锛屽埛鏂板悗闃舵锛屽綋鍓嶅埛鏂伴樁娈碉紙鏇存柊闃舵锛夛紝姣忎釜闃舵has鏈変袱绉嶇姸鎬侊細waitingtorefresh&refreshing锛屾瘡娆tage鍙樺寲鍚庨兘浼氶噸缃姸鎬併€傚苟鎸夌収front鉃urrent鉃ost鉃ront...鐨勬祦绋嬭繘琛岋紝浠ユ绫绘帹锛岀洿鍒版瘡涓猻tage鐨勪换鍔℃睜涓殑鎵€鏈塼ask閮界粨鏉熴€俷extTick鏄墍鏈夐樁娈电殑鍒锋柊浠诲姟瀹屾垚鍚庤繑鍥炵殑Promise.resolve銆傛渶鍚庝竴寮犲浘鎬荤粨浜嗘暣涓繃绋嬨€傛渶鍚庢帹鑽愭垜鐨勫叕浼楀彿锛欳oderRhapsody銆傛偍鐨勫叧娉ㄦ槸瀵规垜鍒涗綔鏈€澶х殑榧撳姳銆?/p>