一篇文章带你了解vue.js的事件循环机制

时间：2022-06-02 10:04:49|栏目：vue|点击：次

一、事件循环机制介绍

JS是单线程的语言，浏览器和Node.js定义了各自的Event Loop（事件循环机制）则是用来解决异步问题。将程序分为“主线程（执行栈）”与“Event Loop线程”，“主线程”自上而下依次执行同步任务，“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行。

事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环，是指浏览器或Node 的一种解决javaScript 单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。“Event Loop线程”先执行宏任务队列，然后执行微任务队列，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。即继续先执行宏任务队列，再执行微任务队列。

宏任务：

script(整体代码)/setTimeout/setInterval/setImmediate/ I/O / UI Rendering

微任务：

process.nextTick()/Promise/Async、Await(实际就是Promise)/MutationObserver(html5新特性)

setTimeout 和 setInterval 等都是任务源，真正进入任务队列的是他们分发的任务。

优先级

setTimeout = setInterval 一个队列setTimeout > setImmediate process.nextTick > Promise

二、经典事件循环面试题

1.在下面这段代码是面试中关于这类问题的经典考题，其中包含了同步、异步任务，几个输出的先后顺序是怎样的。

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

首先进行任务划分，同步任务：new Promise()、console.log('4')；宏任务: setTimeout()；微任务：Promise().then()；Event Loop依次将同步任务推入执行栈并执行，当遇到宏任务或微任务时，推到宏任务或微任务队列中。先执行同步任务，同步队列执行完毕，会去微队列取任务，直到微队列清空，再去宏队列取任务执行。故此段程序执行顺序为：

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优化了,await变得更快了,输出为: