// 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 if /
/
nextTick行为利用了microtask队列,先使用 Promise.resolve().then(nextTickHandler)来将异步回调
放入到microtask中，Promise 和 MutationObserver都可以使用，但是 MutationObserver 在IOS9.3以上的
WebView中有bug，因此如果满足第一项的话就可以执行，如果没有原生Promise就用 MutationObserver。
/
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
// 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 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
/
创建一个MutationObserver，observe监听到DOM改动之后执行的回调 nextTickHandler
/
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter));
// 使用MutationObserver的接口，监听文本节点的字符内容
observer.observe(textNode,{
characterData: true
});
/
每次执行timerFunc函数都会让文本节点的内容在0/1之间切换，切换之后将新赋值到那个我们MutationObserver监听的文本节点上去。
/
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/
如果上面的两种都不支持的话，我们就使用setTimeout来执行
/
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)
}
});
/ 如果pending为true，表明本轮事件循环中已经执行过 timerFunc(nextTickHandler,0) /
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve,reject) => {
_resolve = resolve
})
}
}
})()

demo代码和上面的代码很类似。

我们也可以再来抽离使用nextTick做demo代码如下：

如上代码是nextTick源码的抽离，为了更好的理解nextTick，做了如上的demo。

我们再来理解一下整体的代码的含义；

先定义数组 callbacks = [];来存放所有需要执行的回调函数，定义let pending = false；判断本轮事件是否执行过 timerFunc(nextTickHandler,0)这个函数，为true说明执行过 timeFunc函数，接着定义nextTickHandler函数，该函数的作用是依次遍历数组callbacks保存的函数，依次执行；

请看源代码如下：

然后就是三个判断了，代码如下：

首先判断是否支持Promise对象，如果支持的话，定义了timeFunc()函数，为了下一步调用做准备，然后继续判断是否支持该对象 MutationObserver，如果支持的话，创建一个文本节点，监听该节点数据是否发生改变，如果发生改变的话，调用timerFunc函数，counter值会在0/1切换，如果值改变了的话，把该数据值赋值到data属性上面去，那么data属性发生改变了，就会重新渲染页面(因为vue是通过Object.defineProperty来监听属性值是否发生改变)，如果上面两种情况都不满足的话，那么直接使用setTimeout来执行nextTickHandler函数了；

最后nextTick代码返回一个函数，代码如下：

代码的含义是：传入的cb是否是函数，ctx参数是否是一个对象，如果cb是一个函数的话，使用cb.call(ctx),如果timerFunc没有执行过的话，那么pending为false，因此执行 timerFunc()函数。基本的思路就是这样的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。