vuenextTick原理

vuenextTick鍘熺悊鍓嶉潰璁蹭簡vue2.x鐨勫搷搴斿紡鍘熺悊銆俈ue.js鍦ㄨ鍥炬洿鏂颁笂閲囩敤寮傛鏇存柊绛栫暐銆傝鎴戜滑鐪嬬湅瀹冩槸濡備綍鍋氬埌鐨勩€?**?*/for(璁﹊=0;i<100;i++){this.count++;}/**锛?/鍦╠om鏇存柊鍚庢墽琛屼竴浜涙搷浣溿€倀his.$nextTick(fn)棣栧厛鎻愬嚭涓や釜闂锛氬鏋渇or寰幆鏇存柊count鍊硷紝dom浼氭洿鏂?00娆″悧锛焠extTick鏄浣曠洃鎺om鏇存柊鐨勶紵寮傛鏇存柊娑夊強鍒癹s鐨勮繍琛屾満鍒躲€傚叿浣撳彲浠ュ弬鑰冭繖閲岀殑銆愪簨浠跺惊鐜満鍒躲€戙€傛湰鏂囦富瑕佷粠婧愮爜鐨勮搴﹀垎鏋恘extTick鐨勫師鐞嗗疄鐜般€傝繖鏄垜浠搷搴斾腑鐨剋atcher绫?!--ObserverWatcherclass-->classWatcher{constructor(){Dep.target=this//newWatcher鏃讹紝灏唎bserver瀛樺叆Dep.target}update(){queueWatcher(this)//寮傛鏇存柊绛栫暐}run(){//dom鍦ㄨ繖閲岃繘琛岀湡姝ｇ殑鏇存柊}}watcher瀵硅薄鍦ㄦ洿鏂版墽琛寀pdate锛屽唴閮ㄤ富瑕佹墽琛屼竴涓猶ueueWatcher鍑芥暟锛寃atcher瀵硅薄浣滀负this浼犻€掞紝鎵€浠ユ垜浠粠queueWatcher寮€濮嬨€俼ueueWatcherqueueWatcher鍑芥暟鍦ㄨ皟搴﹀櫒鏂囦欢涓?**queueWatcherfunction*/lethas={};letqueue=[];letwaiting=false;functionqueueWatcher(watcher:Watcher){constid=watcher.id//闃叉闃熷垪闃熷垪wachter瀵硅薄澶嶅埗if(has[id]==null){has[id]=truequeue.push(watcher)//浼犻€掕繖涓洿鏂颁换鍔f(!waiting){waiting=truenextTick(flushSchedulerQueue)}}}/**flushSchedulerQueue鍑芥暟*/functionflushSchedulerQueue(){letwatcher,id;for(index=0;index{_resolve=resolve})}}/**-----timerFunc----*///1.浼樺厛瀹炵幇Promiseif(typeofPromise!=='undefined'&&isNative(Promise)){constp=Promise.resolve()timerFunc=()=>{p.then(flushCallbacks)if(isIOS)setTimeout(noop)}isUsingMicroTask=true}elseif(!isIE&&typeofMutationObserver!=='undefined'&&(isNative(MutationObserver)||MutationObserver.toString()==='[objectMutationObserverConstructor]')){//2.闄嶇骇鍒癕utationObserver瀹炵幇letcounter=1constobserver=newMutationObserver(flushCallbacks)consttextNode=document.createTextNode(String(counter))observer.observe(textNode,{characterData:true})timerFunc=()=>{counter=(counter+1)%2textNode.data=String(counter)澶嶅埗浠ｇ爜}isUsingMicroTask=true}elseif(typeofsetImmediate!=='undefined'&&isNative(setImmediate)){//3.闄嶇骇鍒皊etImmediate浠ュ疄鐜皌imerFunc=()=>{setImmediate(flushCallbacks)}}else{//4.濡傛灉浠ヤ笂閮戒笉鏀寔锛屼娇鐢╯etTimeout鑾峰彇搴曠嚎callbacks.slice(0)callbacks.length=0for(leti=0;i