# vue中nextTick的实现原理
vue中有一个较为特殊的API——nextTick。它是干什么的呢？听名字，跟nodejs的process.nextTick（一个微任务）很像，是不是一回事呢？
根据官方文档 (opens new window)的解释，在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
用法如下：
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
.then(function () {
// DOM 更新了
})
Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际 (已去重的) 工作。
画重点
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环tick中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
也就是说，Vue.nextTick就是希望在DOM更新后，尽可能早地调用传递的回调函数callback。这时，微任务就是一个最佳的选择。
# 源码
在这个普遍需要考察原理的年代，不考究一下就混不下去了。我们来看下源码：
/* vue 2.6.12 */
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.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// Here we have async deferring wrappers using microtasks.
// In 2.5 we used (macro) tasks (in combination with microtasks).
// However, it has subtle problems when state is changed right before repaint
// (e.g. #6813, out-in transitions).
// Also, using (macro) tasks in event handler would cause some weird behaviors
// that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
// So we now use microtasks everywhere, again.
// A major drawback of this tradeoff is that there are some scenarios
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).
let timerFunc
// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
// In problematic UIWebViews, Promise.then doesn't completely break, but
// it can get stuck in a weird state where callbacks are pushed into the
// microtask queue but the queue isn't being flushed, until the browser
// needs to do some other work, e.g. handle a timer. Therefore we can
// "force" the microtask queue to be flushed by adding an empty timer.
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && 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, iOS7, Android 4.4
// (#6466 MutationObserver is unreliable in IE11)
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)) {
// Fallback to setImmediate.
// Technically it leverages the (macro) task queue,
// but it is still a better choice than setTimeout.
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// Fallback to setTimeout.
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
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) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}
# 探案
vue为什么要这样处理呢？
一步步来，假设我们是有Promise也传递了callback的情况，代码会是这样的：
const p = Promise.resolve();
const timerFunc = () => {
p.then(flushCallbacks);
if (isIOS) setTimeout(noop);
};
const callbacks = [];
let pending = false;
function flushCallbacks () {
pending = false;
const copies = callbacks.slice(0);
callbacks.length = 0;
for (let i = 0; i < copies.length; i++) {
copies[i]();
}
}
function nextTick (cb, ctx) {
callbacks.push(() => {
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
});
if (!pending) {
pending = true;
timerFunc();
}
}
这下逻辑就很清晰了，调用nextTick时会处理把callback推送到callbacks这个数组里，也就是维护了一个函数队列。这个队列什么时候执行呢？
如果当前处于可执行状态（!pending），则执行timerFunc，后者通过Promise.resolve的.then把flushCallbacks推到了微任务队列中，延时执行。
这个函数是要更新DOM后调用，为什么要推到微任务里呢？
我们知道
- 微任务有：
Promise、MutationObserver以及process.nextTick(Node 独有) - 宏任务有：
setTimeout、setInterval、setImmediate(Node 独有)、requestAnimationFrame(浏览器独有)、I/O、UI rendering(浏览器独有)、ajax、eventListener
每次事件循环（Event Loop）都有微任务和宏任务这两个队列。
代码在主线程（JS引擎线程）执行，如果遇到宏任务的异步操作，则会将它们的回调函数推到宏任务队列中；如果遇到微任务的异步操作，则将它们的回调函数推到微任务队列中。
事件循环先执行微任务，如果执行过程中遇到新的微任务，也会将它入栈，在这一周期内执行；再执行宏任务，结束后就开启下次的事件循环。
vue在数据变化后，维护了一个队列，相当于做了延迟，那么它什么时候进行渲染DOM操作的呢？
export 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 = true
if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
nextTick(flushSchedulerQueue)
}
}
}
划重点，从上面看出，异步的队列也是使用了
nextTick函数。
所以，这个函数是微任务还是宏任务，其实都无所谓，甚至同步异步都无所谓。只要我们要操作DOM的回调函数放在数据变更之后就可以。
WARNING
一定要把nextTick调用放在数据变更之后，以下情况是得不到变更后的DOM的：
Vue.nextTick(()=>{
console.log(document.querySelector('h1').innerText);
});
this.msg = 'hello';
而微任务明显要快一些，所以vue源码中在没有Promise的情况下，依次判断MutationObserver、setImmediate（它虽然也是宏任务，但要比setTimeout快一点，有时候测试并不能每次都保障这一点，可能与nodejs版本有关），这俩都满足不了，就只能将就使用setTimeout了。
上面代码setTimeout的作用
上面有句代码：if (isIOS) setTimeout(noop);
官方解释的意思是在ios环境下，可能会有种bug，虽然推到微任务队列中，但代码并不执行，需要用setTimeout强制刷新下。
# 总结
综上所述，vue的nextTick方法的实现原理：
vue用异步队列的方式来控制DOM更新和nextTick回调先后执行microtask（微任务）因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕- 因为浏览器和移动端兼容问题，
vue不得不做了microtask向macrotask（宏任务）的兼容(降级)方案
参考资料：