您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue.js的事件循環(huán)機(jī)制如何理解的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue.js的事件循環(huán)機(jī)制如何理解文章都會有所收獲,下面我們一起來看看吧。
JS是單線程的語言,瀏覽器和Node.js定義了各自的Event Loop(事件循環(huán)機(jī)制)則是用來解決異步問題。將程序分為“主線程(執(zhí)行棧)”與“Event Loop線程”,“主線程”自上而下依次執(zhí)行同步任務(wù),“Event Loop線程”將異步任務(wù)推入宏任務(wù)隊列與微任務(wù)隊列去執(zhí)行。
事件循環(huán)機(jī)制從整體上告訴了我們 JavaScript 代碼的執(zhí)行順序 Event Loop 即事件循環(huán),是指瀏覽器或Node 的一種解決javaScript 單線程運(yùn)行時不會阻塞的一種機(jī)制,也就是我們經(jīng)常使用異步的原理?!癊vent Loop線程”先執(zhí)行宏任務(wù)隊列,然后執(zhí)行微任務(wù)隊列,若微任務(wù)在執(zhí)行過程中產(chǎn)生了新的微任務(wù),則繼續(xù)執(zhí)行微任務(wù),微任務(wù)執(zhí)行完畢后,再回到宏任務(wù)中進(jìn)行下一輪循環(huán)。即繼續(xù)先執(zhí)行宏任務(wù)隊列,再執(zhí)行 微任務(wù)隊列。
宏任務(wù):
script(整體代碼)/setTimeout/setInterval/setImmediate/ I/O / UI Rendering
微任務(wù):
process.nextTick()/Promise/Async、Await(實際就是Promise)/MutationObserver(html5新特性)
setTimeout 和 setInterval 等都是任務(wù)源,真正進(jìn)入任務(wù)隊列的是他們分發(fā)的任務(wù)。
優(yōu)先級
setTimeout = setInterval 一個隊列setTimeout > setImmediate process.nextTick > Promise
1.在下面這段代碼是面試中關(guān)于這類問題的經(jīng)典考題,其中包含了同步、異步任務(wù),幾個輸出的先后順序是怎樣的。
setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); console.log('4'); // 2,4,3,1
首先進(jìn)行任務(wù)劃分,同步任務(wù):new Promise()
、console.log('4')
;宏任務(wù): setTimeout()
;微任務(wù):Promise().then()
;Event Loop
依次將同步任務(wù)推入執(zhí)行棧并執(zhí)行,當(dāng)遇到宏任務(wù)或微任務(wù)時,推到宏任務(wù)或微任務(wù)隊列中。先執(zhí)行同步任務(wù),同步隊列執(zhí)行完畢,會去微隊列取任務(wù),直到微隊列清空,再去宏隊列取任務(wù)執(zhí)行。故此段程序執(zhí)行順序為:
new Promise()
、console.log('4')
、Promise().then()
、setTimeout()
。
2.示例2
答案輸出為:async2 end => Promise => async1 end => promise1 => promise2 => setTimeout
3.示例3
mounted(){ this.test(); }, methods:{ test(){ console.log('script start'); this.async1(); setTimeout(function() { console.log('setTimeout') }, 0); new Promise(resolve => { console.log('Promise') resolve() }) .then(function() { console.log('promise1') }) .then(function() { console.log('promise2') }) console.log('script end') }, async async1() { await this.async2() console.log('async1 end') }, async async2() { console.log('async2 end') }, }
新版的chrome瀏覽器中不是如上打印的,因為chrome優(yōu)化了,await變得更快了,輸出為:
// script start => async2 end => Promise => script end => async1 end => promise1 => promise2
分析這段代碼:
執(zhí)行代碼,輸出script start。
執(zhí)行async1(),會調(diào)用async2(),然后輸出async2 end,此時將會保留async1函數(shù)的上下文,然后跳出async1函數(shù)。
遇到setTimeout,產(chǎn)生一個宏任務(wù)
執(zhí)行Promise,輸出Promise。遇到then,產(chǎn)生第一個微任務(wù)
繼續(xù)執(zhí)行代碼,輸出script end
代碼邏輯執(zhí)行完畢(當(dāng)前宏任務(wù)執(zhí)行完畢),開始執(zhí)行當(dāng)前宏任務(wù)產(chǎn)生的微任務(wù)隊列,輸出promise1,該微任務(wù)遇到then,產(chǎn)生一個新的微任務(wù)
執(zhí)行產(chǎn)生的微任務(wù),輸出promise2,當(dāng)前微任務(wù)隊列執(zhí)行完畢。執(zhí)行權(quán)回到async1
執(zhí)行await,實際上會產(chǎn)生一個promise返回,即
let promise_ = new Promise((resolve,reject){ resolve(undefined)})
執(zhí)行完成,執(zhí)行await后面的語句,輸出async1 end 最后,執(zhí)行下一個宏任務(wù),即執(zhí)行setTimeout,輸出setTimeout
注意以上分析是舊版瀏覽器await執(zhí)行慢導(dǎo)致async1在微任務(wù)執(zhí)行后執(zhí)行。
關(guān)于“vue.js的事件循環(huán)機(jī)制如何理解”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue.js的事件循環(huán)機(jī)制如何理解”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。