详细分析Vue.nextTick()实现

Firstly, this paper is based on Vue 2.6.8
刚开始接触Vue的时候，哇nextTick好强，咋就在这里面写就是dom更新之后，当时连什么macrotask、microtask都不知道(如果你也不是很清楚，推荐点这里去看一下，也有助于你更好地理解本文)，再后来，写的多了看得多了愈发膨胀了，就想看看这个nextTick到底是咋实现的

一、源码

       关于vue中nextTick方法的实现位于vue源码下的src/core/util/next-tick.js，（下文所提到的next-tick.js都是指这个文件）由于篇幅原因就不全粘过来了，下面随着分析会贴出主要代码片段。

二、分析

1. 函数定义

   将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实现异步的核心了
   

   ---

2. 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实现流程大致是这样的：

st=>operation: 将回调函数push到callbacks数组中
op=>operation: 调用timerFunc()根据不同情况采用不同异步方式调用flushCallbacks
e=>operation: 刷新callbacks数组，遍历并调用其中所有函数
st->op->e

      能看懂一部分Vue源码对于我这种入行不到一年的萌新还是非常有成就感的一件事，但是还有两个地方有些疑虑,上文也都有提及：

1) 箭头函数不能改变this指向为什么使用nextTick的时候可以使用箭头函数，即nextTick函数定义中的cb.call(ctx)
2) 为什么更新日志中写的是always use microtask，而我找到的源码中是存在使用macroTask的情况的
      后续将对问题的解决进行补充，也欢迎大佬在线评论传道授业

---

2019/4/14
      对于之前的两个问题，我只能做出Vue本身使用了一部分babel的猜测，不过这两个问题不影响整体逻辑的理解就是了