共计 5004 个字符，预计需要花费 13 分钟才能阅读完成。
1 nextTick 的使用
vue 中 dom 的更像并不是实时的，当数据改变后，vue 会把渲染 watcher 添加到异步队列，异步执行，同步代码执行完成后再统一修改 dom，我们看下面的代码。
<template>
<div class="box">{{msg}}</div>
</template>
export default {
name: 'index',
data () {
return {msg: 'hello'}
},
mounted () {
this.msg = 'world'
let box = document.getElementsByClassName('box')[0]
console.log(box.innerHTML) // hello
}
}可以看到，修改数据 后并不会 立即更新 dom，dom 的更新是 异步 的，无法通过同步代码获取，需要使用nextTick，在下一次事件循环中获取。
this.msg = 'world'
let box = document.getElementsByClassName('box')[0]
this.$nextTick(() => {console.log(box.innerHTML) // world
})如果我们需要获取数据更新后的 dom 信息，比如动态获取宽高、位置信息等，需要使用 nextTick。
2 数据变化 dom 更新与 nextTick 的原理分析
2.1 数据变化
vue 双向数据绑定依赖于 ES5 的 Object.defineProperty，在数据初始化的时候，通过 Object.defineProperty 为每一个属性创建getter 与setter，把数据变成响应式数据。对属性值进行修改操作时，如 this.msg = world，实际上会触发setter。下面看源码，为方便越读，源码有删减。
数据改变触发 set 函数
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
// 数据修改后触发 set 函数 经过一系列操作 完成 dom 更新
set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val
if (getter && !setter) return
if (setter) {setter.call(obj, newVal)
} else {val = newVal}
childOb = !shallow && observe(newVal)
dep.notify() // 执行 dep notify 方法}
})执行 dep.notify 方法
export default class Dep {constructor () {
this.id = uid++
this.subs = []}
notify () {const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
// 实际上遍历执行了 subs 数组中元素的 update 方法
subs[i].update()}
}
}当数据被引用时，如 <div>{{msg}}</div>，会执行 get 方法，并向subs 数组中添加渲染 Watcher，当数据被改变时执行 Watcher 的update 方法执行数据更新。
update () {
/* istanbul ignore else */
if (this.lazy) {this.dirty = true} else if (this.sync) {this.run()
} else {queueWatcher(this) // 执行 queueWatcher
}
}update 方法最终执行queueWatcher
function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {has[id] = true
if (!flushing) {queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {i--}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
// 通过 waiting 保证 nextTick 只执行一次
waiting = true
// 最终 queueWatcher 方法会把 flushSchedulerQueue 传入到 nextTick 中执行
nextTick(flushSchedulerQueue)
}
}
}执行 flushSchedulerQueue 方法
function flushSchedulerQueue () {currentFlushTimestamp = getNow()
flushing = true
let watcher, id
...
for (index = 0; index < queue.length; index++) {watcher = queue[index]
if (watcher.before) {watcher.before()
}
id = watcher.id
has[id] = null
// 遍历执行渲染 watcher 的 run 方法 完成视图更新
watcher.run()}
// 重置 waiting 变量
resetSchedulerState()
...
}也就是说当数据变化最终会把 flushSchedulerQueue 传入到 nextTick 中执行 flushSchedulerQueue 函数会遍历执行 watcher.run() 方法，watcher.run()方法最终会完成视图更新，接下来我们看关键的 nextTick 方法到底是啥
2.2 nextTick
nextTick 方法会被传进来的回调 push 进 callbacks 数组，然后执行 timerFunc 方法
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
// push 进 callbacks 数组
callbacks.push(() => {cb.call(ctx)
})
if (!pending) {
pending = true
// 执行 timerFunc 方法
timerFunc()}
}timerFunc
let timerFunc
// 判断是否原生支持 Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {const p = Promise.resolve()
timerFunc = () => {
// 如果原生支持 Promise 用 Promise 执行 flushCallbacks
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
// 判断是否原生支持 MutationObserver
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
let counter = 1
// 如果原生支持 MutationObserver 用 MutationObserver 执行 flushCallbacks
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
// 判断是否原生支持 setImmediate
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {timerFunc = () => {
// 如果原生支持 setImmediate 用 setImmediate 执行 flushCallbacks
setImmediate(flushCallbacks)
}
// 都不支持的情况下使用 setTimeout 0
} else {timerFunc = () => {
// 使用 setTimeout 执行 flushCallbacks
setTimeout(flushCallbacks, 0)
}
}
// flushCallbacks 最终执行 nextTick 方法传进来的回调函数
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {copies[i]()}
}nextTick 会优先使用microTask, 其次是macroTask。
也就是说 nextTick 中的任务，实际上会异步执行，nextTick(callback)类似于
Promise.resolve().then(callback)，或者setTimeout(callback, 0)。
也就是说 vue 的视图更新 nextTick(flushSchedulerQueue)等同于setTimeout(flushSchedulerQueue, 0)，会异步执行 flushSchedulerQueue 函数，所以我们在 this.msg = hello 并不会立即更新 dom。
要想在 dom 更新后读取 dom 信息，我们需要在 本次异步任务创建之后创建一个异步任务。
为了验证这个想法我们不用 nextTick，直接用 setTimeout 实验一下。如下面代码，验证了我们的想法。
<template>
<div class="box">{{msg}}</div>
</template>
<script>
export default {
name: 'index',
data () {
return {msg: 'hello'}
},
mounted () {
this.msg = 'world'
let box = document.getElementsByClassName('box')[0]
setTimeout(() => {console.log(box.innerHTML) // world
})
}
}如果我们在数据修改前 nextTick，那么我们添加的异步任务会在渲染的异步任务 之前 执行，拿不到更新后的 dom。
<template>
<div class="box">{{msg}}</div>
</template>
<script>
export default {
name: 'index',
data () {
return {msg: 'hello'}
},
mounted () {this.$nextTick(() => {console.log(box.innerHTML) // hello
})
this.msg = 'world'
let box = document.getElementsByClassName('box')[0]
}
}3 总结
vue 为了保证性能，会把 dom 修改添加到异步任务，所有同步代码执行完成后再统一修改 dom，一次事件循环中 的多次数据修改只会触发一次 watcher.run()。也就是通过 nextTick，nextTick 会优先使用 microTask 创建异步任务。vue 项目中如果需要获取修改后的 dom 信息，需要通过 nextTick 在 dom 更新任务之后创建一个异步任务。如官网所说，nextTick 会在下次 DOM 更新循环结束之后执行延迟回调。
参考文章
Vue nextTick 机制
ps：欢迎关注微信公众号——前端漫游指南，刚刚开设不久，会定期发布优质原创文章和译文，感谢~
