详细分析Vue.nextTick()实现
刚开始接触vue的时候，哇nextTick好强，咋就在这里面写就是dom更新之后，当时连什么macrotask、microtask都不知道(如果你也不是很清楚，推荐点这里去看一下，也有助于你更好地理解本文)，再后来，写的多了看得多了愈发膨胀了，就想看看这个nextTick到底是咋实现的
一、源码
关于vue中nextTick方法的实现位于vue源码下的src/core/util/next-tick.js，（下文所提到的next-tick.js都是指这个文件）由于篇幅原因就不全粘过来了，下面随着分析会贴出主要代码片段。
二、分析
函数定义
将nextTick定义到Vue原型链上代码位于src/core/instance/render.js,代码如下
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
}上述代码中return的nextTick就是我们本文主角，他的定义如下
export function nextTick (cb?: Function, ctx?: Object) { // next-tick.js line87
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
})
}
}1）函数参数cb?: Function，意味参数cb(callback)的类型为函数或undefined，ctx(context)同理，这种类型判断是TypeScript的写法。
同时可以看到我们常用的this.$nextTick()已经 在定义到原型链上时 给nextTick函数传了ctx参数也就是指向当前组件的this。(这句话好绕，暴露了自己的语文水平)
2）函数体内callbacks是在next-tick.js line10定义的一个数组，判断如果参数cb不为undefined，就把cb push到callbacks中，如果cb为undefined，则把_resolve(ctx)push到callbacks中。
因为平时使用都是传回调的，所以很好奇cb什么情况下会为undefined，去翻看Vue官方文档发现：
2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。
这就对了，函数体内最后的if判断很明显就是这个意思if (!cb && typeof Promise !== 'undefined')没有回调&&支持Promise。
在测试工程里写如下代码
created() {
Vue.nextTick(undefined, { a: 'in nextTick' }).then(ctx => {
console.log(ctx.a)
})
console.log('out nextTick')
}运行结果如下
没有任何问题（注意测试要使用Vue.nextTick而不是$nextTick，因为上文讲到过$nextTick函数的ctx参数是当前组件）
3) 函数体内只剩下中间if (!pending),这段代码很好懂，pending明显是一个状态位，而timerFunc()就应该是nextTick实现异步的核心了
timerFunc
在代码中搜索timerFunc发现除了声明和nextTick函数中，还有四处使用timerFunc的代码片段，这四处代码片段被嵌套在一个大的if else判断里
if (typeof Promise !== 'undefined' && isNative(Promise)) { // next-tick.js line42
timerFunc = ...
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
timerFunc = ...
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
timerFunc = ...
} else {
timerFunc = ...
}可以看到nextTick优先使用microTask（Promise和MutationObserver）然后使用macroTask（setImmediate和setTimeout）这也符合尤大在2.6.0的更新日志中说的
next-tick: revert nextTick to alaways use microtask
首先这个alaways是不是拼错了
不太对啊，我是不是对always有什么误解，这不是明明还用macroTask的可能吗
至于具体在不同的异步方式中是如何定义timerFunc的大同小异，如果仔细讲解的话还要花费部分篇幅说明MutationObserver，毕竟我们的主角是nextTick，这里就不喧宾夺主,反正都是把timerFunc定义为在异步中调用flushCallbacks的函数，而函数flushCallbacks的定义在源码中如下
function flushCallbacks () { // next-tick.js line13
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}因为callbacks里都是函数，所以一层深拷贝的方式就可以满足复制需求，定义一个copies数组等于callbacks,然后清空callbacks，然后遍历copies数组调用其中的函数。
三、总结
nextTick实现流程大致是这样的：
能看懂一部分Vue源码对于我这种入行不到一年的萌新还是非常有成就感的一件事，但是还有两个地方有些疑虑,上文也都有提及：
1) 箭头函数不能改变this指向为什么使用nextTick的时候可以使用箭头函数，即nextTick函数定义中的cb.call(ctx)
2) 为什么更新日志中写的是always use microtask，而我找到的源码中是存在使用macroTask的情况的
后续将对问题的解决进行补充，也欢迎大佬在线评论传道授业
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
