Vue源码小问答二：Vue.nextTick的用法

Vue.nextTick

官方说明

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

注解

Vue的Dom树更新一般是在异步回调中完成的，这里的异步回调可能用promise或者setTimeout。这就导致我们无法以同步的方式获取更新后的Dom结构，因为在数据状态更新完成之后Vue并不是立即更新Dom树，而是在下一个事件循环中更新。（不要问我问什么要做异步，文档里说的很清楚）

Vue会在完成Dom更新后调用

Vue.nextTick

，所以这个可以获取到更新后的Dom。

nextTick

是一个全局方法，也就是所有的Vue实例都会在统一的地方处理。这个方法主要是在数据状态发生变化后调用，例如

data

的变化、

mutation

调用之后等。例如页面上有Vue实例a、b，js对这两个实例的data进行修改后分别调用了

vue.nextTick

，在页面完成dom更新后两个回调函数会以此被调用。

源码解毒：请看中文注释部分

export const nextTick = (function () {
// 存放一次dom更新循环内所有的回调函数
const callbacks = []
// 在一次dom更新循环内timerFunc方法只能被调用一次
let pending = false
let timerFunc

function nextTickHandler () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}

// 在eventloop大循环中插入回调
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)

if (isIOS) setTimeout(noop)
}
} else if (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 IE11, iOS7, Android 4.4
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/* istanbul ignore next */
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}

return function queueNextTick (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()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}
})()