先貼一段代碼，相信大家一定知道他的出處。沒(méi)錯(cuò)，vue dev版 core/util/env.js中的一段代碼。

// Here we have async deferring wrappers using both microtasks and (macro) tasks. // In < 2.4 we used microtasks everywhere, but there are some scenarios where // microtasks have too high a priority and fire in between supposedly // sequential events (e.g. #4521, #6690) or even between bubbling of the same // event (#6566). However, using (macro) tasks everywhere also has subtle problems // when state is changed right before repaint (e.g. #6813, out-in transitions). // Here we use microtask by default, but expose a way to force (macro) task when // needed (e.g. in event handlers attached by v-on). let microTimerFunc let macroTimerFunc let useMacroTask = false// Determine (macro) task defer implementation. // Technically setImmediate should be the ideal choice, but it's only available // in IE. The only polyfill that consistently queues the callback after all DOM // events triggered in the same loop is by using MessageChannel. /* istanbul ignore if */ if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {macroTimerFunc = () => {setImmediate(flushCallbacks)} } else if (typeof MessageChannel !== 'undefined' && (isNative(MessageChannel) ||// PhantomJSMessageChannel.toString() === '[object MessageChannelConstructor]' )) {const channel = new MessageChannel()const port = channel.port2channel.port1.onmessage = flushCallbacksmacroTimerFunc = () => {port.postMessage(1)} } else {/* istanbul ignore next */macroTimerFunc = () => {setTimeout(flushCallbacks, 0)} }// Determine microtask defer implementation. /* istanbul ignore next, $flow-disable-line */ if (typeof Promise !== 'undefined' && isNative(Promise)) {const p = Promise.resolve()microTimerFunc = () => {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)} } else {// fallback to macromicroTimerFunc = macroTimerFunc }/*** Wrap a function so that if any code inside triggers state change,* the changes are queued using a (macro) task instead of a microtask.*/ export function withMacroTask (fn: Function): Function {return fn._withTask || (fn._withTask = function () {useMacroTask = trueconst res = fn.apply(null, arguments)useMacroTask = falsereturn res}) }export function nextTick (cb?: Function, ctx?: Object) {let _resolvecallbacks.push(() => {if (cb) {try {cb.call(ctx)} catch (e) {handleError(e, ctx, 'nextTick')}} else if (_resolve) {_resolve(ctx)}})if (!pending) {pending = trueif (useMacroTask) {macroTimerFunc()} else {microTimerFunc()}}// $flow-disable-lineif (!cb && typeof Promise !== 'undefined') {return new Promise(resolve => {_resolve = resolve})} } 復(fù)制代碼

首先說(shuō)明一下，2.5之前的版本不是這樣判斷的，但是為什么這個(gè)版本這么寫，注釋中已經(jīng)說(shuō)明了

microtask優(yōu)先級(jí)太高，連續(xù)的事件或同一事件的冒泡中會(huì)有問(wèn)題

如果都優(yōu)先用macro任務(wù)，有時(shí)渲染又太慢

所以制定了目前這個(gè)執(zhí)行策略，即

優(yōu)先執(zhí)行micro任務(wù)，即promise里執(zhí)行，如果有特殊需要，比如操作導(dǎo)致state變化時(shí)，那么則會(huì)選擇macro任務(wù)

setImmediate（IE10和edge支持）、MessageChannel、setTimeout都為宏任務(wù) 至于三個(gè)宏任務(wù)為什么這么排列請(qǐng)看對(duì)比

Promise、MutationObserver為微任務(wù)

總結(jié)

以上是生活随笔為你收集整理的Vue nextTick执行时机分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。