nextTick的实现原理

Vue中的nextTick是怎么实现的，我们又是如何获取到DOM更新之后的节点，带着这个问题我们去看一下vue源码中是怎么实现的？

目录

• nextTick的作用
• vue的数据更新操作
• nextTick的实现原理

nextTick的作用

当我们更新了数据的状态之后，我们希望可以能够获取最新的节点来做一些我们的回调操作，但是问题是我们一般获取不到更新之后的DOM的，因为还没有渲染，这个时候我们就需要使用这个方法。

我们看到很多说法是下次DOM更新周期之后执行，那么这个周期指的是什么时候呢？

在vue中我们之后数据变化之后我们的watcher就是知道了，它就会执行notify通知操作，然后执行patch进行对比操作等一系列的流程，最后执行render函数重新刷新了页面。

但是watcher的触发渲染流程的并不是同步的，它维护了一个队列，当需要渲染时，watcher就会被推送到这个队列里面，在下一次事件循环才会让watcher触发渲染流程。

为什么vue时使用了异步的更新队列？

我们知道vue的更新最小颗粒度就是组件，如果我们在同一轮事件循环多次对某一个data数据进行了更改，那么必定会触发多次渲染流程，那就很浪费性能了。

这时候其实vue不会渲染多次，而是将watcher收到的信息放到一个队列里面，下一次添加的时候看里面有没有相同的watcher，有的话就不push进去了。

当新进来的watcher不存在队列里面，就添加进来。在下一次的事件循环中依次触发渲染流程并清空队列。保证了即使同一事件循环俩个数据改变了也会触发一次渲染。

事件循环机制

我们都知道JavaScript是单线程的，所以只有一个主线程来处理所有的任务。当遇到异步任务比如定时器时，就会挂起任务，然后根据一定的规则执行回调函数。

事件循环分层同步任务和异步任务，异步任务又分成了宏任务和微任务。当执行栈中没有任务了，就去微任务队列找，执行微任务的回调函数，直到为空。

下一步，去宏任务队列拿出一个任务的回调放执行栈，然后当执行栈任务完了之后又去检查微任务。无限循环，构成了事件循环。

宏任务

• setTimeout
• setInterval
• setImeediate
• I/O
• UI交互事件

微任务

• Promise.then
• MutationObserver
• process.nextTick

vue的数据更新操作

我们知道vue默认是使用异步执行DOM更新的，当我们对数据进行set的时候，watcher就会知道哪里依赖了这个属性，然后把watcher推到异步队列里面。

当某个响应式数据发生变化的时候，它的setter函数会通知闭包中的Dep，Dep则会调用它管理的所有Watch对象。触发Watch对象的update实现。

update () {
    /* istanbul ignore else */
    if (this.lazy) {
        this.dirty = true
    } else if (this.sync) {
        /*同步则执行run直接渲染视图*/
        this.run()
    } else {
        /*异步推送到观察者队列中，下一个tick时调用。*/
        queueWatcher(this)
    }
}

当异步执行update的时候，会调用queueWatcher函数。

queueWatcher的实现中，Watch对象并不是立即更新视图，而是被push进了一个队列queue，此时状态处于waiting的状态，这时候会继续会有Watch对象被push进这个队列queue，等到下一个tick运行时，这些Watch对象才会被遍历取出，更新视图。同时，id重复的Watcher不会被多次加入到queue中去。

 /*将一个观察者对象push进观察者队列，在队列中已经存在相同的id则该观察者对象将被跳过，除非它是在队列被刷新时推送*/
export function queueWatcher (watcher: Watcher) {
  /*获取watcher的id*/
  const id = watcher.id
  /*检验id是否存在，已经存在则直接跳过，不存在则标记哈希表has，用于下次检验*/
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      /*如果没有flush掉，直接push到队列中即可*/
      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.
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

我们看到上面最后还是执行了nextTick，执行的目的是在microtask或者task中推入一个function，在当前栈执行完毕（也许还会有一些排在前面的需要执行的任务）以后执行nextTick传入的function。

我理解为这些数据更新的回调函数都是从微任务队列里面取的，然后我们手动调用$nextTick就是在callbacks数组后面追加我们传入的回调函数，不管你前端还有多少微任务，等你执行完了之后下一个执行的肯定是我们传入的。

所以我们就可以拿到DOM更新之后的数据。

nextTick的实现原理

我们在源码中看到了nextTick中定义的三个重要变量：

src/core/util/next-tick.js

• callbacks：用来存储所有需要执行的回调函数
• pending：用来标志是否正在执行回调函数
• timerFunc：用来触发执行回调函数

首先我们看到nextTick传入了两个参数，一个是cb回调，另一个是ctx上下文。

export function nextTick (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)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 没有提供回调函数，那么将返回promise对象
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

• 1、拿到回调函数push到callbacks数组中
• 2、如果不是pending等待状态，就会执行timerFunc函数

那么timerFunc到底是干嘛的呢？

let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

我们看到这里对应不同的情况，对它进行了不一样的赋值。

• 首先判断是否支持promise，如果支持就将flushCallbacks放在promise中异步执行，并且标记使用微任务。

• 不支持promise就看是否支持MutationObserver方法，如果支持就new了一个MutationObserver类，创建一个文本节点进行监听，当数据发生变化了就会异步执行flushCallbacks方法

• 两个都不支持就看是否支持setImmediate方法，如果支持setImmediate 就去异步执行flushCallbacks方法

• 以上三种方法都不支持，就使用setTimeout），然后异步去执行flushCallbacks方法

flushCallbacks方法

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

flushCallbacks方法就是循环执行传递的函数。注意这里我们看到了它拷贝了一份数组，干嘛用的呢？

这是为了防止nexttick里面又有nextTick，执行过程中又会往callbacks中加入内容，防止循环。