Vue源码分析之nextTick-一一网

这是我参与更文挑战的第10天，活动详情查看：更文挑战

前言

JS单线程

JS是一门单线程语言，同一时刻只能执行一个任务（不考虑Web Worker）。那我们绑定的click事件，setTimeOut都是怎么处理的，毕竟JS引擎是单线程的，它在执行当前任务时用户触发点击事件了要怎么处理？？怎么去计时？？

这些当然不是JS引擎去做的，虽然JS引擎是单线程的，但是浏览器内核却是多线程的，它提供了别的线程来辅助JS引擎。

比如当JS引擎执行代码块遇到鼠标点击/setTimeout/ajax等，浏览器内核的事件触发线程会把与之对应的事件回调添加到事件触发线程中；当对应的事件满足触发条件时，事件触发线程把事件添加到任务队列的队尾，等待JS引擎空闲了去处理。

而浏览器内核也是提供了定时器触发线程去专门计算setInterval/setTimeout，等计时完毕，告知事件触发线程将回调添任务队列中。

当JS引擎遇到XMLHttpRequest时，浏览器内核会新开一个http异步请求线程去执行，等检测到状态变更时，异步线程会告知事件触发线程将回调放入任务队列。

主线程与执行栈

所有任务都是在JS主线程（JS引擎线程）执行，形成一个执行栈，即所有任务都被放入执行栈等待主线程去执行。当遇到ajax，setTimeout等异步操作任务时，JS引擎不会去等待这些异步任务执行完毕，而是交给浏览器内核其他线程去辅助处理，一旦异步任务有了运行结果，则事件触发线程会将它们的回调函数加入到任务队列中。

一旦执行栈中的所有同步任务执行完成，主线程会去查看任务对列中是否有其他任务执行，如果任务队列不为空，则按先进先出的原则开始执行。主线程会不断重复这一步。

微任务和宏任务

微任务：promise, mutationObserve

宏任务：JS整体代码, I/O, setTimeout, setInterval, requestAnimationRequest

事件循环

事件循环会先执行当前的JS同步代码(其实每次执行栈中就是一个宏任务)，遇到微任务，将它放入微任务队列。在一次宏任务执行完毕，去执行微任务队列中的所有微任务，然后开始下一次宏任务，每次宏任务可以看成是一个tick。

nextTick

复习完毕，开始进入今天的正题。Vue官方对nextTick的用法解释是在下次DOM更新循环结束后执行的回调函数，修改了数据后立即执行该方法可以拿到修改后的DOM。代码的定义是在src/core/util/next-tick.js中。

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
复制代码

nextTick主要是把我们的回调函数加入到callbacks数组中，这里使用callbacks数组，而不是直接执行回调函数主要是为了保证多次调用nextTick函数时，不会开启多个异步任务，而是把所有nextTick中的回调都写到一个数组中统一一次执行。

在pending为false的情况下调用timerFunc函数。

如果没有传回调函数，直接调用nextTick，Vue自己写了一个Promise来保证代码继续往后走。如this.$nextTick().then( () => {…})，当_resolve执行完会走入then中的代码。

pending

pending默认是false，在调用timerFunc前置为true，然后当调用了flushCallbacks后又置为false。可以看出它就是一个标志位，标志着next-tick中的回调是否执行。flushCallbacks是在timerFunc中调用的，来看下这个函数是做了什么。

export let isUsingMicroTask = false

const callbacks = []
let pending = false

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

timerFunc

可以看出timerFunc才是nextTick的精髓所在，它的代码也很短，优先看是否是支持微任务，如果支持promise.then，就在promise.then中执行回调函数；再看是否支持mutationObserver，否则就用宏任务来代替。优先使用setImmediate，其次使用setTimeOut

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
} 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
} 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)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
复制代码