通俗易懂的Vue异步更新策略及 nextTick 原理

setTimeout(() => {
  console.log('真的在300ms后打印吗？')
}, 300)

这段代码很简单，相信很多人都会说yes。当然也不乏大牛的存在，一眼就能看出答案来不一定。这是为什么呢？在面试过程中碰到这类问题如何回答才能让面试官满意，并且如何去扩散我们的知识点。

在正式讲解之前我们可以先了解一些简单的概念：

什么是进程： 进程是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）

什么是线程： 线程是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

概念理解起来比较枯燥，做个比喻好了：

浏览器是多进程的： 在浏览器中，每打开一个tab页面，其实就是新开了一个进程，在这个进程中，还有ui渲染线程，js引擎线程，http请求线程等。 所以，浏览器是一个多进程的。

js是单线程的： js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程。

js执行机制--Event loop

由于js是单线程，js设计者把任务分为同步任务和异步任务，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待；异步任务则是挂在在一个任务队列里，等待主线程所有任务执行完成后，通知任务队列可以把可执行的任务放到主线程执行。异步任务放到主线程执行完后，又通知任务队列把下一个异步任务放到主线程中执行。这个过程一直持续，直到异步任务执行完成，这个持续重复的过程就叫Event loop。而一次循环就是一次tick 。

在任务队列中的异步任务又可以分为两种microtast（微任务） 和 macrotask（宏任务）

microtast（微任务）：Promise， process.nextTick， Object.observe， MutationObserver

macrotask（宏任务）：script整体代码、setTimeout、 setInterval等

执行优先级上，先执行宏任务macrotask，再执行微任务mincrotask。

执行过程中需要注意的几点是：

• 在一次event loop中，microtask在这一次循环中是一直取一直取，直到清空microtask队列，而macrotask则是一次循环取一次。

• 如果执行事件循环的过程中又加入了异步任务，如果是macrotask，则放到macrotask末尾，等待下一轮循环再执行。如果是microtask，则放到本次event loop中的microtask任务末尾继续执行。直到microtask队列清空。

• 到这里，上面那个300ms的定时器为什么不一定是精确的300ms之后打印就能理解了：

因为300ms的setTimeout并不是说300ms之后立马执行，而是300ms之后被放入任务列表里面。等待事件循环，等待它执行的时候才能执行代码。如果异步任务列表里面只有它这个macrotask任务，那么就是精确的300ms。但是如果 还有microtast等其它的任务，就不止300ms了。

扩展一：

在面试过程中有时也会遇到这类问题。在这之前我以为考的是let和var的区别，其实它里面也包含着今天讲的知识。

for(var i =0 ;i < 3; i++) {
  console.log("for中i的值："+i)
  var time = setTimeout(() => {
    console.log("setTimeout中i的值："+i)
  }, 300);
}

打印的结果导致是什么样的呢：

• 1、当执行for循环的时候，定义了3个定时器，由于setTimeout是异步任务，所有这三个定时器，都会在300ms之后加入任务队列

• 2、此时执行代码，依次输出个 for中i的值：1、2、3

• 300ms之后，每个setTimeout的加入到任务队列，这时for循环早就执行完毕了，此时的 i 由于主线程执行完之后变成了3。由于这时setTimeout匿名回调函数保持对外部变量 i 的引用，所以最终再打印出3个 setTimeout中i的值：3

用let改变一下结果就不一样。最终依次打印出 setTimeout中i的值：0、1、2

for(let i =0 ;i < 3; i++) {
  console.log("for中i的值："+i)
  var time = setTimeout(() => {
    console.log("setTimeout中i的值："+i)
  }, 300);
}

• 1、var声明的变量，在全局范围内都有效，所以在全局只有一个变量i，每一次循环，变量i的值都会发生改变，而循环内部，被赋给setTimeout函数内部的i指向全局的i,结合之前讲的事件执行机制，最后一轮打印的i也都是3了

• 2、let声明的变量，let只在块及作用域中有效，并且不存在变量提升。所以每次循环在setTimeout中的i都是一个新的变量。

既然每次循环的i都是一个新值，那么结果输出应该都是初始化值1呀 ？这是因为JavaScript引擎内部会记住上一轮循环的值，初始化本轮变量i时，就在上一轮循环的基础上进行计算

扩展二：

console.log(1);
setTimeout(function () {
  console.log(2)
}, 0); 
new Promise(function (resolve) {
  console.log(3)    
  for (var i = 100; i > 0; i--) {
    i == 1 && resolve()
  }
  console.log(4)
}).then(function () {
  console.log(5)
}).then(function () {
  console.log(6)
});
console.log(7);

这段代码在面试中也经常考到，之前我也是很迷糊的，但是当你掌握了今天的知识，你会发现一切都是那么简单

• 1、由于script也属于macrotask，所以整个script里面的内容都放到了主线程（任务栈）中，按顺序执行代码。然后遇到console.log(1)，直接打印1。

• 遇到setTimeout,表示0秒后加入任务队列，因为setTimeout是一个宏观任务，所以会放到下一个macrotask，这里不会执行

• 遇到new Promise，new Promise在实例的过程中执行代码都是同步进行的，只有回调.then()才是微任务。所以先打印3。执行完循环打印4。然后遇到第一个 .then()，属于microtask，加入到本次循环的microtask队列里面。接着向下执行又遇到一个 .then()，又加入到本次循环的microtask队列里面。然后继续向下执行。

• 遇到console.log(7)，直接打印7。直到此时，一个事件循环的macrotask执行完成，然后去查看此次循环是否还有microtask，发现还有刚才的 .then() ，立即放到主线程执行，打印出5。然后发现还有第二个 .then()，立即放到主线程执行，打印出6 。此时microtask任务列表清空完了。到此第一次循环完成。

• 第二次事件循环，从macrotask任务列表里面找到了第一次放进的setTimeout，放到主线程执行，打印出2。

• 最终打印的结果：1、3、4、7、5、6、2