Vue源码中nextTick原理解密

正所谓磨刀不误砍柴工，在真正阅读源码之前先了解清楚一些变量是如何判断、纯函数的作用是十分有必要的。知道锤子、斧头、扳手、剪刀是干嘛用的，这样才不至于在初次见面的时候显得措手不及。

nextTick是VUE的一个核心实现，也是开发中常用的方法之一，常见使用方法如下：

this.$nextTick(() => {
	console.log('DOM更新后开始回调')
})

将回调延迟到下次 DOM 更新循环之后执行。在阅读本篇之前，确保你已经了解JS事件循环机制。

此方法是在renderMixin(Vue)方法中注册的，顺着core/instance/index.js目录找到同级目录下render.js文件

export function renderMixin (Vue: Class<Component>) {
  //其他代码忽略
  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }
  //其他代码忽略
}

我们看到其实就是在Vue原型链上挂了一个$nextTick函数，只有一句话指向nextTick函数，第一个参数是要回调的函数，第二个参数为当前实例对象。而nextTick函数就定义在当前目录：core/util/next-tick.js，老规矩，先上源码(注释有删减)：

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

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]()
  }
}

let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  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)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

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的原理就是一句话而已。只是框架做了一些边界处理：

// 当开发者执行
this.$nextTick(() => {
	console.log('DOM更新后开始回调')
})
//其实就是相当于执行
Promise.resolve().then(() => {
	console.log('DOM更新后开始回调')
})

注册为异步任务的方法很多，从19行~50行主要为注册异步方式，优先使用Promise，其次是MutationObserver，然后是setImmediate，最后是setTimeout。根据当前宿主环境对异步方法的支持度依次优先选择使用哪个方法。我们这里以Promise为例：

let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
}

只要当前宿主环境支持Promise，以上代码相当于定义了一个函数timerFunc

let timerFunc = () => {
	Promise.resolve().then(flushCallbacks);
	if (isIOS) setTimeout(noop)
}

其中有这么一段代码if (isIOS) setTimeout(noop)与主逻辑似乎不搭嘎，其实这是为了解决一些UIWebViews中存在的很奇怪的问题，我们把他归结为边界问题处理，这里不做详细讨论。那么flushCallbacks是什么呢？

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]()
  }
}

flushCallbacks显然是一个函数，for循环遍历数组callbacks的拷贝copies，分别执行调用每一项，并清空callbacks数组。

接下来看下nextTick主函数：

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
    })
  }
}

其中做了一些边界问题处理，比如开发者在调用this.$nextTick()的时候，若没传回调参数等异常情况的处理方式。其中还包含一个try...catch...若执行异常则提示错误。主要逻辑则是这两点：

• 1、往数组callbacks添加一个函数，函数的核心内容是cb.call(ctx)，也就是执行开发者传的回调函数，作用域是当前所在组件实例；
• 2、执行timerFunc函数，也就是Promise.resolve().then(flushCallbacks)。

这里细心的同学应该注意到，有一个pending变量贯穿flushCallbacks函数以及nextTick函数，它是一个开关，它的真假代表回调队列是否处于等待刷新状态，初始值为false代表回调队列为空，不需要等待刷新。那么为什么要增加pending开关，以及为什么回调函数要存放在callbacks一个数组里呢？答案就是为了节约性能，例如开发者连续三次调用nextTick方法

methodFn () {
  this.$nextTick(() => { console.log(1) })
  this.$nextTick(() => { console.log(2) })
  this.$nextTick(() => { console.log(3) })
}

以上例子连续三次调用了nextTick方法，但只有第一次调用 $nextTick 方法时才会执行`timerFunc`函数将`flushCallbacks`注册为`微任务`，但此时`flushCallbacks`函数并不会执行，因为它要等待接下来的两次`$nextTick方法的调用语句执行完后才会执行，或者准确的说等待调用栈被清空之后才会执行。也就是三次nextTick执行完毕后，callbacks数组里已经被push了三个待回调的函数，当前执行栈结束后就会执行微任务——flushCallbacks`。