vue源码学习总结 深入解析nextTick

nextTick实现机制

优先级：setImmediate() > MessageChannel > Promise.resolve().then() > setTimeout(fn,0)

执行过程

当前tick =>
当前tick第一次调用queueNextTick 的时候将回调放入callbacks中，且将timerFunc推入到宏/微任务栈中，设置pending锁=>
当前tick后续调用queueNextTick 的时候将回调放入callbacks中 =>
当前tick执行完毕后，执行timerFunc，执行所有callbacks，解除pending 锁=>
下一tick循环

源码实现

// src/core/util/env.js

/**
 * Defer a task to execute it asynchronously.
 */
export const nextTick = (function () {
   
  const callbacks = []
  let pending = false
  let timerFunc

  // 依次执行所有回调函数 callbacks
  function nextTickHandler () {
   
    pending = false
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
   
      copies[i