JavaScript | 从nextTick到宏任务与微任务

Vue.nextTick官方文档：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

言外之意，Vue中的DOM(view)都不是在修改model之后马上更新的，而是一个异步的更新过程：在修改了model之后，把这些数据的修改全部 push 到一个队列里，然后内部调用 一次 nextTick 去更新视图。

为了了解每次tick/loop的流程，得先从宏任务和微任务开始说起：
宏任务：setTimeout,setInterval,IO，整个<script>(重要)

微任务：Promise，process.nextTick等等

那么一次事件循环(称作Tick或Loop)如下图：

1. 开始执行，首先执行第一个宏任务：全局<script></script>中的代码，遇到异步代码就交给相应的异步工作线程执行；
2. 执行到</script>，结束第一个宏任务，查看微任务队列，若有微任务，按顺序清空。若没有微任务，就执行UI Render渲染DOM，此时就完成了一次Loop/Tick；
3. 继续查找宏任务队列并执行

由此看出，并不是很多文章所谓的先执行微任务再执行宏任务！而是执行下一个宏任务之前，必须把微任务队列给清空了！而进入代码执行的第一个任务就是宏任务（script整体）！而每执行一个宏任务，就是一个新的Loop/Tick

---

先来个简单例子：

    console.log('script start');
    setTimeout(function() {
      console