nextTick 是什么
$nextTick：依据官网文档的解释，它能够在 DOM 更新结束之后执行一个回调函数，并返回一个 Promise（如果反对的话）
// 批改数据vm.msg = "Hello";// DOM 还没有更新Vue.nextTick(function() { // DOM 更新了});这块了解 EventLoop 的应该一看就懂，其实就是在下一次事件循环开始时开始更新 DOM，防止两头频繁的操作引起页面的重绘和回流。
这块援用官网文档：
可能你还没有留神到，Vue 在更新 DOM 时是异步执行的。只有侦听到数据变动，Vue 将开启一个队列，并缓冲在同一事件循环中产生的所有数据变更。如果同一个 watcher 被屡次触发，只会被推入到队列中一次。
这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作是十分重要的。而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行理论 (已去重的) 工作。Vue 在外部对异步队列尝试应用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不反对，则会采纳setTimeout(fn, 0)代替。
列如当设置vm.text = 'new value'时，该组件不会立刻从新渲染，当刷新队列时，组件会在下一个事件循环‘tick’中更新，
<div id="example">{{message}}</div>var vm = new Vue({ el: '#example', data: { message: '123' }})vm.message = 'new message' // 更改数据vm.$el.textContent === 'new message' // falseVue.nextTick(function () { vm.$el.textContent === 'new message' // true})个别在设置了this.xx='xx'数据后，立刻失去最新的 DOM 数据时，才会用到$nextTick，因为 DOM 的更新是异步进行的，所以获取须要用到这个办法。
- Vue 异步更新策略
更新流程（源码解析）
- 当数据被批改时，watcher 会侦听到变动，而后会将变动进行入队：
/* * Subscriber interface. * Will be called when a dependency changes. */Watcher.prototype.update = function update() { /* istanbul ignore else */ if (this.lazy) { this.dirty = true; } else if (this.sync) { this.run(); } else { queueWatcher(this); }};- 并应用 nextTick 办法增加一个 flushScheduleQueue 回调
/** * Push a watcher into the watcher queue. * Jobs with duplicate IDs will be skipped unless it's * pushed when the queue is being flushed. */function queueWatcher(watcher) { var 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. var 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 (!config.async) { flushSchedulerQueue(); return; } nextTick(flushSchedulerQueue); } }}- flushScheduleQueue 退出到 callback 数组中，并且异步执行
function nextTick(cb, ctx) { var _resolve; callbacks.push(function() { if (cb) { try { cb.call(ctx); // !! cb 就是退出的回调 } catch (e) { handleError(e, ctx, "nextTick"); } } else if (_resolve) { _resolve(ctx); } }); if (!pending) { // 异步执行 操作 见timerFunc pending = true; timerFunc(); } // $flow-disable-line if (!cb && typeof Promise !== "undefined") { return new Promise(function(resolve) { _resolve = resolve; }); }}- timerFunc 操作就是异步执行了顺次判断应用：Promise.then=>MutationObserver=>setImmediate=>setTimeout
var timerFunc;if (typeof Promise !== "undefined" && isNative(Promise)) { var p = Promise.resolve(); timerFunc = function() { p.then(flushCallbacks); // 1. Promise.then if (isIOS) { setTimeout(noop); } }; isUsingMicroTask = true;} else if ( !isIE && typeof MutationObserver !== "undefined" && (isNative(MutationObserver) || MutationObserver.toString() === "[object MutationObserverConstructor]")) { // 2. MutationObserver var counter = 1; var observer = new MutationObserver(flushCallbacks); var textNode = document.createTextNode(String(counter)); observer.observe(textNode, { characterData: true, }); timerFunc = function() { counter = (counter + 1) % 2; textNode.data = String(counter); }; isUsingMicroTask = true;} else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) { // 3. setImmediate timerFunc = function() { setImmediate(flushCallbacks); };} else { //4. setTimeout timerFunc = function() { setTimeout(flushCallbacks, 0); };}- flushCallbacks 遍历所有的 callbacks 并执行
function flushCallbacks() { pending = false; var copies = callbacks.slice(0); callbacks.length = 0; for (var i = 0; i < copies.length; i++) { copies[i](); }}- 其中就有后面退出的 flushScheduleQueue，利用 queue 中的 watcher 的 run 办法，更新组件
for (index = 0; index < queue.length; index++) { watcher = queue[index]; watcher.run();}总结
以上就是 vue 的 nextTick 办法的实现原理了，总结一下就是：
- Vue 用异步队列的形式来管制 DOM 更新和 nextTick 回调先后执行
- microtask 因为其高优先级个性，能确保队列中的微工作在一次事件循环前被执行结束
- 因为兼容性问题，vue 不得不做了 microtask 向 macrotask 的降级计划
参考
- Vue-nextTick 源码地址
- 全面解析Vue.nextTick实现原理