Vue官方文档的解释是：
Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
所以有时候改变状态之后无法立即获取更新后的视图，我们就需要通过Vue.nextTick(cb)或者vm.$nextTick(cb)方法，在回调中获取更新后的视图，举个例子：
Vue.component('example', {
template: '<span>{
{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
// 源码目录/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
// 执行nextTick中注册的回调函数
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// 在2.5版本中，Vue使用宏任务队列，但这有一个隐性的问题，它的执行时机（状态改变）可能在页面“回流”之前，可能触发两次回流，同时也存在一个无法规避的问题。所以Vue之后优先使用微任务队。
// 异步执行回调函数，根据当前环境判断使用哪种方式
let timerFunc
// 异步任务的降级方案，优先使用微任务promise，其实MutationObserver，然后是setImmediate。最后不行就使用setTimeout宏任务
// 值得注意的是iOS9.3.3及以上版本的UIWebView中，MutationObserver触发几次后可能完全停止工作。
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
// 微任务
timerFunc = () => {
// 放入微任务队列当中
p.then(flushCallbacks)
// 解决ios当中的兼容性问题，有时候Promise.then虽然将任务放入微任务队列中，
// 但是微任务队列不会执行，除非浏览器进行一些额外操作。比如执行一个定时器
if (isIOS) setTimeout(noop)
}
// 使用微任务
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// 使用MutationObserver，实现微任务。部分环境不支持promise，比如PhantomJS、IOS7和Android4.4
// 值得注意的是IE11 MutationObserver不可靠
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
// 利用文本节点，修改文本节点的内容，导致dom更新，触发MutationObserver事件
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// 技术上讲，它等于放入宏任务队列，但是比timeout好，因为其优先级更高
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// 最后，使用setTimeout放入宏任务队列
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
// 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) {
// 没有回调函数，且当前环境支持promise的情况下，返回一个resolve（ctx）状态的promise的，供外部使用
_resolve(ctx)
}
})
// 如果在等待阶段，当前tick将回调任务放入异步队列中。微任务或者宏任务
if (!pending) {
// 将标识符置为true，下一tick不会进入，有任务执行完成后会变为false，在下下个tick中进入
pending = true
// 开始执行回调函数，将放入异步队列中
timerFunc()
}
// 如果环境可以使用promise，就返回一个promise
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}