理解event Loop与vue中的nextTick（浏览器）

我们的目的是理解，nextTick的意义，这个是什么，这个做的原理是什么？

首先nextTick 是在下一次event Loop时，执行回调函数；

问题来了，为什么要这么写呢？因为是为了，确保，Dom渲染完了，执行了，后再做回调处理。

那是什么东西可以确保是Dom执行完了呢？（当然是从代码来处理顺序，vue做了处理，下面是原理理解）：

先来理解event Loop，js是单线程执行，就是从上往下执行，但是会分为同步任务与异步异步；

js执行任务，会创建执行栈，同步任务会被推入执行栈，立即执行；而异步任务会被推入任务队列，并注册回调函数，等执行栈执行空闲时，执行栈就会读取，任务队列的回调函数，并执行该函数；

为了确保在更新Dom后，可以执行回调，是根据一个特性：event loop的最后，会有一个UI render步骤，也就是更新DOM，所以UI render后，添加回调处理就可以做到。event loop的过程是，在执行完同步任务后，执行任务队列的一个宏任务，然后执行这个宏任务中的微任务。所以在UI render后面添加microTask就可以实现，第一首选就是Promise.then,当不兼容的时候就要用setTimeout，虽然它是宏任务，但是也会在任务队列的末尾添加。在下一轮的event Loop就会执行。也同样可以达到效果，唯一不好的就是会有所延迟。

先介绍一下(浏览器环境的)宏任务和微任务大致有哪些：
宏任务：
1、script(整体的代码)
2、setTimeout
3、setInterval
4、I/O 操作
5、UI 渲染 

微任务：
1、Promise.then
2、MutationObserver

异步任务分为宏任务和微任务。

当宏任务执行完，执行栈空闲时，js首先会将队列中的所有微任务执行完，再去执行宏队列中的宏任务。如此反复，就是事件循环了。

一轮循环：是一次宏任务加上当前所有微任务执行。当js执行时，先执行宏任务（就是当前宏任务中所有的同步任务），遇到微任务，则推入微队列，并注册回调函数。当该次宏任务执行完后，会读取微任务注册的回调函数到执行栈中执行。执行完后。继续下一轮循环。

例子：

setTimeout(function () {
  console.log('3');
}, 0);

Promise.resolve().then(function () {
  console.log('2');
});

console.log('1');
结果：
// 1
// 2
// 3

这个段代码可以看做是一个宏任务，

当js执行时，遇到setTimeout，它是宏任务，则放入宏队列，等待本轮执行完后，它会在下一轮中执行。

然后遇到了promise.then，则被推入微队列。

接着，打印“1”。到此，本轮宏任务已经执行完毕，但是，本次循环并未结束，还要执行微任务队列的内容。

然后，js去微队列中读取then注册的回调函数执行，打印“2”。

到此注意！本轮所有任务执行完毕，本次事件循环结束了。

接着，开启下一轮循环，执行settimeout，打印“3”。
最后执行结果为：

1

2

3