从 Event Loop 角度解读 Vue NextTick 源码

矫情吗；* 2022-10-13 12:41 138阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

# 来源：小卒先生 #

https://juejin.cn/post/6963542300073033764

## 解读背景 ##

1.  在学习 **vue** 源码，**nextTick** 方法借助了浏览器的 **event loop** 事件循环做到了异步更新。
2.  在公司面试的时候，笔试题最喜欢出关于 **JavaScript** 运行机制，**Promise/A+** 等关于 **event loop** 线程的题目。
3.  学会 **nextTick** 原理帮助定位 **BUG** , 使用 **Vue** 会更加灵活。

## 什么是 event loop ##

先看一张图 （来自 mr.z 大佬）

![aac81b85fbbadb382164ad75aabd3683.gif][]

v2-d1ca0d6b13501044a5f74c99becbcd3d\_b.gif

1.  先执行同步阻塞任务，同步任务会等待上一个执行完毕以后执行下一个，当同步任务执行完毕，再执行异步任务，遇到异步任务会将异步任务的回调函数注册在异步任务队列里。注意，如果主线程上没有同步任务会直接调用异步任务的微任务。
2.  执行宏任务，遇到微任务将都添加到微任务队列里。
3.  开始执行微任务队列，当宏任务执行完后执行微任务队列，直到微任务队列全部执行完，微任务队列为空。
4.  执行宏任务，如果在执行宏任务期间有微任务，将微任务添加到微任务队列里，执行完宏任务之后执行微任务，直到微任务队列全部执行完。
5.  继续执行宏任务队列。

**重复2, 3, 4，5……直到宏微任务为空。**

## $nextTick 的实现原理 ##

从字面意思理解，**next** 下一个，**tick** 滴答（钟表）来源于定时器的周期性中断（输出脉冲），一次中断表示一个 **tick**，也被称做一个“时钟滴答”），**nextTick** 顾名思义就是下一个时钟滴答。看源码，在 **Vue 2.x** 版本中，**nextTick** 在 **src\\core\\util** 中的一个单独的文件 **next-tick.js** ，可见 **nextTick** 的重要性，虽然短短 **200** 多行，尤大却单独创建一个文件去维护。

接下来我们来看整个文件。

1.  声明了三个全局变量，**callbacks: \[\] ，pending: Boolean，timerFunc: undefined**。
2.  声明了一个函数 **flushCallbacks**。
3.  一堆 \*\*if，else if \*\*判断。
4.  抛出了一个函数 **nextTick**。

### nextTick 函数 ###

![ae58e4fa316208b5aed9420bf6bc17e2.png][] 未命名文件 (1).png

1.  声明一个局部变量 **\_resolve** 。
2.  把所有回调函数压进 **callbacks** 中，以栈的形式的存储所有 **callback**。
3.  当 **pending** 为 **false** 时，执行 **timerFunc** 函数。
4.  当没有 **callback** 的时候，返回一个 **Promise** 的调用方式，可以用 **.then** 接收。

### timerFunc 函数 ###

我们开始说了，timerFunc 为全局变量，现在调用 timerFunc ，timerFunc 是什么时候被赋值为一个函数，并且函数里执行代码又是什么？

![608f5e5bd4b8d76c07ee375768615f4e.png][] 我们看到，这段判断代码总共有四个分支，四个分支里对 timerFunc 有不同的赋值，我们先来看第一个分支。

#### Promise 分支 ####

if (typeof Promise !== 'undefined' && isNative(Promise)) {
      const p = Promise.resolve()
      timerFunc = () => {
        p.then(flushCallbacks)
        // In problematic UIWebViews, Promise.then doesn't completely break, but
        // it can get stuck in a weird state where callbacks are pushed into the
        // microtask queue but the queue isn't being flushed, until the browser
        // needs to do some other work, e.g. handle a timer. Therefore we can
        // "force" the microtask queue to be flushed by adding an empty timer.
        if (isIOS) setTimeout(noop)
      }
      isUsingMicroTask = true
    }
    复制代码

1.  判断环境是否支持 Promise 并且 **Promise** 是否为原生。
2.  使用 **Promise** 异步调用 **flushCallbacks** 函数。
3.  当执行环境是 **iPhone** 等，使用 **setTimeout** 异步调用 **noop** ，**iOS** **中在一些异常的webview** 中，**promise** 结束后任务队列并没有刷新所以强制执行 **setTimeout** 刷新任务队列。

#### MutationObserver 分支 ####

else if (!isIE && typeof MutationObserver !== 'undefined' && (
      isNative(MutationObserver) ||
      // PhantomJS and iOS 7.x
      MutationObserver.toString() === '[object MutationObserverConstructor]'
    )) {
      // Use MutationObserver where native Promise is not available,
      // e.g. PhantomJS, iOS7, Android 4.4
      // (#6466 MutationObserver is unreliable in IE11)
      let counter = 1
      const observer = new MutationObserver(flushCallbacks)
      const textNode = document.createTextNode(String(counter))
      observer.observe(textNode, {
        characterData: true
      })
      timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter)
      }
      isUsingMicroTask = true
    }
    复制代码

1.  对非IE浏览器和是否可以使用 **HTML5** 新特性 **MutationObserver** 进行判断。
2.  实例一个 **MutationObserver** 对象，这个对象主要是对浏览器 **DOM** 变化进行监听，当实例化 **MutationObserver** 对象并且执行对象 **observe**，设置 **DOM** 节点发生改变时自动触发回调。
3.  把 **timerFunc** 赋值为一个改变 **DOM** 节点的方法，当 **DOM** 节点发生改变，触发 **flushCallbacks** 。（这里其实就是想用利用 **MutationObserver** 的特性进行异步操作）

#### setImmediate 分支 ####

else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
      // Fallback to setImmediate.
      // Technically it leverages the (macro) task queue,
      // but it is still a better choice than setTimeout.
      timerFunc = () => {
        setImmediate(flushCallbacks)
      }
    }
    复制代码

1.  判断 **setImmediate** 是否存在，**setImmediate** 是高版本 **IE** （IE10+） 和 **edge** 才支持的。
2.  如果存在，传入 **flushCallbacks** 执行 **setImmediate** 。

#### setTimeout 分支 ####

else {
      // Fallback to setTimeout.
      timerFunc = () => {
        setTimeout(flushCallbacks, 0)
      }
    }
    复制代码

1.  当以上所有分支异步 **api** 都不支持的时候，使用 **macro** **task** （宏任务）的 **setTimeout** 执行 **flushCallbacks** 。

#### 执行降级 ####

我们可以发现，给 timerFunc 赋值是一个降级的过程。为什么呢，因为 Vue 在执行的过程中，执行环境不同，所以要适配环境。

![81f3256ed4ae5af7f6a0d5f2cfdcce3d.png][] 未命名文件 (4).png

这张图便于我们更清晰的了解到降级的过程。

### flushCallbacks 函数 ###

function flushCallbacks () {
      pending = false
      const copies = callbacks.slice(0)
      callbacks.length = 0
      for (let i = 0; i < copies.length; i++) {
        copies[i]()
      }
    }
    复制代码

循环遍历，按照 **队列** 数据结构 **“先进先出”** 的原则，逐一执行所有 **callback** 。

## 总结 ##

到这里就全部讲完了，**nextTick** 的原理就是利用 **Event** **loop** 事件线程去异步重新渲染，分支判断首要选择 **Promise** 的原因是当同步JS代码执行完毕，执行栈清空会首先查看 **micro** **task** （微任务）队列是否为空，不为空首先执行微任务。在我们 **DOM** 依赖数据发生变化的时候，会异步重新渲染 **DOM** ，但是比如像 **echarts** ，**canvas**……这些 **Vue** 无法在初始状态下收集依赖的 **DOM** ，我们就需要手动执行 **nextTick** 方法使其重新渲染。

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

![382c398d87d77a35406f3f75c66585e2.png][]

内推社群

我组建了一个氛围特别好的腾讯内推社群，如果你对加入腾讯感兴趣的话（后续有计划也可以），我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。

![524c0950690338dc27a39c4e78d285b1.png][]

[aac81b85fbbadb382164ad75aabd3683.gif]: /images/20221005/e0b0f9dd436b4ca1964c9eaa39f7c657.png
[ae58e4fa316208b5aed9420bf6bc17e2.png]: /images/20221005/3d3b6c8e914d4ddeb4e09ba7d8075daf.png
[608f5e5bd4b8d76c07ee375768615f4e.png]: /images/20221005/f7b3112fb5ba4d128eda9bff15fe3663.png
[81f3256ed4ae5af7f6a0d5f2cfdcce3d.png]: /images/20221005/893885133247496699c875e3ad8e6373.png
[382c398d87d77a35406f3f75c66585e2.png]: /images/20221005/1b93c9d9a99a479b8a8fc0b8add02b77.png
[524c0950690338dc27a39c4e78d285b1.png]: /images/20221005/6dc1e65d3adf4d5cadbf0fafe432ddad.png