$nextTick

vm.$nextTick(callback)

用法

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后使用它，然后等待 DOM 更新。

2.1.0 ，如果没有提供回调且在支持 promise 的环境中，则返回一个 promise。

原理

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 会开启一个事件队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到事件循环队列中一次。在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作很有用的。然后，在下一个事件循环 tick 中，Vue 刷新事件队列并执行已经去重的工作。

在调用 Watcher 的更新函数时，并不会直接进行更新，而是把需要更新的 Watcher 加入到 Queue 队列里，然后把具体的更新方法 flushSchedulerQueue 传给 nextTick 调用。

主要是因为 DOM Tree 的更新是实时的，并不需要监听到 DOM 更新，但是多次操作 DOM 的代价太过于昂贵。

这样对于性能来说无疑是好的，但是也带来了问题，DOM 异步更新，修改数据之后，去获取 DOM 节点内容，是获取到的之前的数据，这个时候还没有更新 DOM。如果想要基于 DOM 更新后做一些事情，可以使用 $nextTick 来做。

源码

let timerFunc
// 先检测是否支持 promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve() 
    timerFunc = () => {
        p.then(flushCallbacks)
    }

// 检测是否支持 MutationObserver
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
    

// 是否支持 setImmediate  setImmediate(高版本 IE 和 Edge 支持)
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }

// 都不支持的情况下，使用 setTimeout
} else {
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

先对浏览器对宏任务、微任务的一个支持情况，选用支持的用法。

宏任务耗费的时间是大于微任务的，优先先会匹配微任务。不支持，在使用宏任务。并且各种宏任务之间的效率也是不同的。

nextTick

// 回调队列
const callbacks = []
// 异步锁
let pending = false

// 执行队列中的每一个回调
function flushCallbacks () {
  pending = false  // 重置异步锁
  // 防止出现 nextTick 中包含 nextTick 时出现的问题，在执行回调函数队列之前，提前
  // 复制并清空回调函数队列
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 执行回调函数队列
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

function nextTick (cb) {
    // 将回调函数推入回调队列。
    callbacks.push(() => {
        if (cb) {
            try {
                cb.call(ctx)
            } catch (e) {
                handleError(e, ctx, 'nextTick')
            }
        } else if (_resolve) {
            _resolve(ctx)
        }
    })

    // 如果异步锁未锁上，锁上异步锁，调用异步函数，等同步函数执行完之后，就开始执行回调函数队列。
    if (!pending) {
        pending = trues
        // 执行， 会在下一个 tick 执行 执行 flushCallbacks,
        // 就是对 callbacks 遍历，然后执行相对应的回调函数。
        timerFunc()
    }
    
}