【vue2源码学习】— nextTIck

前置知识

定义在在 src/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
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

let timerFunc
// 是原生的Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  // timerFunc 处理为微任务
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  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
  // 在一次同步任务中，把cb压入callbacks
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 一次同步任务之会执行一次,在下一次tick的时候会把callbacks的函数执行清空
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  //不传 cb 参数的时候，可以这样用：nextTick().then(() => {})
  // 这个回调会从闭包的_resolve触发
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

我们可以看到nextTick通过timerFunc来根据环境提供的方法控制是微任务还是宏任务
由于一般情况下都是支持promise的
所以nextTick是微任务的情况，那么就会可能出现其实浏览器还并没有开始更新
这时候我们就需要再延迟一下触发时机了
比如:
nextTick(()=>{setTimeout(()=>{}))

Vue.js 提供了 2 种调用 nextTick 的方式，
一种是全局 API Vue.nextTick，
一种是实例上的方法 vm.$nextTick