Vue.$nextTick && setTimeout

为什么 Vue.$nextTick 通常比 setTimeout 优先级高，渲染更快生效？

   nextTick 在vue 源码中是利用 Promise.resolve()实现的。该问题实际就是Promise与setTimeout的比较，本质是Event Loop中微任务与宏任务的比较：

为什么微任务的执行要先于宏任务呢？

首先，我们需要先知道JS的几个概念。

JS是单线程执行

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

什么是宿主

JS运行的环境，一般为浏览器或者Node。

执行栈

是一个存储函数调用的栈结构，遵循先进后出的原则。

宏任务和微任务

宏任务可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

微任务可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。 

总结

大家可以结合经典题仔细领悟一下

console.log('script start') 
async function async1() { 
    await async2() console.log('async1 end') 
} 
async function async2() {
    console.log('async2 end') 
} 
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')