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

最近在学习一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山，只有自己去登山，才能看到不一样的风景，体会更加深刻。今天我们就来聊聊 Vue 中比较重要的异步更新策略及 nextTick 原理。

在聊话题之前我们可以看下下面这道面试题：

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

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

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

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

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

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

进程就是一个公司，每个公司都有自己的资源可以调度；公司之间是相互独立的；而线程就是公司中的每个员工，多个员工一起合作，完成任务，公司可以有一名员工或多个，员工之间共享公司的空间。

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

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

由于 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

平时可能在面试也不乏经常被问到：vue 中的 nextTick 是什么？它的原理和作用是啥？那 nextTick 到底是什么，官方文档是这么定义的：

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

我们也可以简单的理解为： 当页面中的数据发生改变了，就会把该任务放到一个异步队列中，只有在当前任务空闲时才会进行 DOM 渲染，当 DOM 渲染完成以后，该函数就会自动执行。

结合上面讲的微任务去理解，microtask 在这一次循环中是一直取一直取，直到清空 microtask 队列，而 macrotask 则是一次循环取一次，一次就是一次 tick。因此当触发数据的 setter，vue 在 microtask 建立一个 cb 事件，在循环到下一次 tick 的时候会去自动执行这个事件。

结合源码我们再去品一下：当触发某个数据的 setter 方法后，它的 setter 函数会通知闭包中的 Dep，Dep 则会调用它管理的所有 Watch 对象。触发 Watch 对象的 update 实现。我们来看一下 update 具体是如何实现的。（这里的 Dep、Watcher 就是 Vue 响应式的基础了，后面有章节会讲到，这里只需要理解 state 变化更新的时候，调用 update 函数更新）

/* 调度者接口，当依赖发生改变的时候进行回调 */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {this.dirty = true} else if (this.sync) {
      /* 同步则执行 run 直接渲染视图 */
      this.run()} else {
      /* 异步推送到观察者队列中，下一个 tick 时调用。*/
      queueWatcher(this)
    }
  }

从代码中可以看到，当 state 变化的时候会调用 queueWatcher(this)函数，这也是 vue 异步更新队列的方式。那么我们跟着去看看 queueWatcher 做了什么

 /* 将一个观察者对象 push 进观察者队列，在队列中已经存在相同的 id 则该观察者对象将被跳过，除非它是在队列被刷新时推送 */
export function queueWatcher (watcher: Watcher) {
  /* 获取 watcher 的 id*/
  const id = watcher.id
  /* 检验 id 是否存在，已经存在则直接跳过，不存在则标记哈希表 has，用于下次检验 */
  if (has[id] == null) {has[id] = true
    if (!flushing) {queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {i--}
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

从 queueWatcher 代码中看出 Watch 对象并不是立即更新视图，而是被 push 进了一个队列 queue，此时状态处于 waiting 的状态，这时候会继续会有 Watch 对象被 push 进这个队列 queue，等到下一个 tick 运行时将这个队列 queue 全部拿出来 run 一遍，这些 Watch 对象才会被遍历取出，更新视图。同时，id 重复的 Watcher 不会被多次加入到 queue 中去。这也解释了同一个 watcher 被多次触发，只会被推入到队列中一次。

到这里可以停一下理理思路，借鉴这种图再去细品一下：

从图中和之前讲的 Event loop 来总结一下：vue 为了避免频繁的操作 DOM, 采用异步的方式更新 DOM。这些异步操作会通过 nextTick 函数将这些操作以 cb 的形式放到任务队列中（以微任务优先），当每次 tick 结束之后就会去执行这些 cb，更新 DOM。

vue 为了实现异步更新效果，建立了 nextTick 函数，接下来让我们一起看看 nextTick 是如何实现的，参考源码地址查看。

/* 存放异步执行的回调 */
const callbacks = [] 
/* 一个标记位，如果已经有 timerFunc 被推送到任务队列中去则不需要重复推送 */
let pending = false
/* 一个函数指针，指向函数将被推送到任务队列中，等到主线程任务执行完时，任务队列中的 timerFunc 被调用 */
let timerFunc

/*
  推送到队列中下一个 tick 时执行
  cb 回调函数
  ctx 上下文
*/
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
   // 第一步 传入的 cb 会被 push 进 callbacks 中存放起来
  callbacks.push(() => {if (cb) {      
        try {cb.call(ctx)
      } catch (e) {handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {_resolve(ctx)
    }
  })  
  // 检查上一个异步任务队列（即名为 callbacks 的任务数组）是否派发和执行完毕了。pending 此处相当于一个锁
  if (!pending) {
  // 若上一个异步任务队列已经执行完毕，则将 pending 设定为 true（把锁锁上）pending = true
    // 调用判断 Promise，MutationObserver，setTimeout 的优先级
    timerFunc()}
  // 第三步执行返回的状态
  if (!cb && typeof Promise !== 'undefined') {   
    return new Promise(resolve => {_resolve = resolve})
  }
}

关于 timerFunc 函数这里省略了，其实就是判断使用 Promise，MutationObserver，setTimeout 的优先级。系统中会优先用 Promise，在 Promise 不存在的情况下使用 MutationObserver，这两个方法都会在 microtask 中执行，会比 setTimeout 更早执行，所以优先使用。
如果上述两种方法都不支持的环境则会使用 setTimeout，在 task 尾部推入这个函数，等待调用执行。

思考?：为什么优先执行顺序 Promise、MutationObserver》setTimeout

在主线程上，如果再遇到 macrotask，就把它放到 macrotask 任务队列末尾，由于一次 event loop 只能取一个 macrotask，所以遇到的宏任务就需要等待其它轮次的事件循环了；如果遇到 microtask，则放到本次循环的 microtask 队列中去。这样就能明白为什么 microtask 会比 macrotask 先处理了。这也是 nextTick 总是要比 setTimeout 先要执行。

总结的话，细细品一下官方文档加强理解：官方文档

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

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

js 执行机制 –Event loop

扩展一：

扩展二：

在 vue 中的扩展 – 异步更新策略及 nextTick 原理