深入探究Vue中$nextTick的实现原理

/**
 * 根据 watcher 配置项，决定接下来怎么走，一般是 queueWatcher
 */
update () {
  /* istanbul ignore else */
  if (this.lazy) {
    // 懒执行时走这里，比如 computed
    // 将 dirty 置为 true，可以让 computedGetter 执行时重新计算 computed 回调函数的执行结果
    this.dirty = true
  } else if (this.sync) {
    // 同步执行，在使用 vm.$watch 或者 watch 选项时可以传一个 sync 选项，
    // 当为 true 时在数据更新时该 watcher 就不走异步更新队列，直接执行 this.run 
    // 方法进行更新
    // 这个属性在官方文档中没有出现
    this.run()
  } else {
    // 更新时一般都这里，将 watcher 放入 watcher 队列
    queueWatcher(this)
  }
}

/**
 * 将 watcher 放入 watcher 队列 
 */
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  // 如果 watcher 已经存在，则跳过，不会重复入队
  if (has[id] == null) {
    // 缓存 watcher.id，用于判断 watcher 是否已经入队
    has[id] = true
    if (!flushing) {
      // 当前没有处于刷新队列状态，watcher 直接入队
      queue.push(watcher)
    } else {
      // 已经在刷新队列了
      // 从队列末尾开始倒序遍历，根据当前 watcher.id 找到它大于的 watcher.id 的位置，然后将自己插入到该位置之后的下一个位置
      // 即将当前 watcher 放入已排序的队列中，且队列仍是有序的
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      // waiting = false 表示当前浏览器的异步任务队列没有 flushSchedulerQueue 
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        // 直接去刷新 watcher 调度队列 
        // 一般不会走这儿，Vue 默认是异步执行，如果改为同步执行，性能会大打折扣
        flushSchedulerQueue()
        return
      }
      /**
       *   熟悉的 nextTick => vm.$nextTick、Vue.nextTick
       *   1、将 回调函数（flushSchedulerQueue） 放入 callbacks 数组
       *   2、通过 pending 控制向浏览器任务队列中添加 flushCallbacks 函数
       */
      nextTick(flushSchedulerQueue)
    }
  }
}

export function nextTick(cb? Function, ctx: Object) {
    let _resolve
    // cb 即为传入的 flushSchedulerQueue函数，会统一处理压入callbacks数组
    // callbacks也就是异步操作队列
    callbacks.push(() => {
        if(cb) {
            try {
                cb.call(ctx)  // 调用 flushSchedulerQueue 函数，将其放入 callbacks异步队列
            } catch(e) {
                handleError(e, ctx, 'nextTick')
            }
        } else if (_resolve) {
            _resolve(ctx)
        }
    })
    // pending 为false 说明本轮事件循环中没有执行过timerFunc()
    if(!pending) {
        pending = true
        timerFunc()
    }
    // 当不传入 cb 参数时，提供一个promise化的调用 
    if(!cb && typeof Promise !== 'undefined') {
      // 如nextTick().then(() => {})
      // 当_resolve执行时，就会跳转到then逻辑中
        return new Promise(resolve => {
            _resolve = resolve
        })
    }
}

// 创建MO实例
const observer = new MutationObserver(callback)
const textNode = '想要监听的Don节点'
observer.observe(textNode, {
  characterData: true // 说明监听文本内容的修改
})

/**
 * flushCallbacks 做了三件事：
 *   1、将 pending 置为 false  表示下一个 flushCallbacks() 可以进入浏览器异步任务队列
 *   2、清空 callbacks 数组
 *   3、执行 callbacks 数组中的所有函数（比如 flushSchedulerQueue、用户调用 nextTick 传递的回调函数）
 */
// 对callbacks进行遍历，然后执行相应的回调函数
function flushCallbacks () {
    pending = false
    // 这里拷贝的原因是：
    // 有的cb 执行过程中又会往 callbacks 中加入内容
    // 比如 $nextTick的回调函数里还有$nextTick
    // 后者的应该放到下一轮的nextTick 中执行
    // 所以拷贝一份当前的，遍历执行完当前的即可，避免无休止的执行下去
    const copies = callbcks.slice(0)
    callbacks.length = 0 // callbacks里面的函数
    for(let i = 0; i < copies.length; i++) {
        copies[i]() // 执行 callbacks 数组中的每一个函数
    }
}
let timerFunc // 异步执行函数 用于异步延迟调用 flushCallbacks 函数
// 优先使用 Promise  首选 Promise.resolve().then()
if(typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
   // 首选 Promise.resolve().then()
    timerFunc = () => {
        // 在 微任务队列 中放入 flushCallbacks 函数 
        p.then(flushCallbacks)
        // IOS 的UIWebView, Promise.then 回调被推入 microTask 队列，但是队列可能不会如期执行
        // 因此，添加一个空计时器强制执行 microTask
        if(isIOS) setTimeout(noop)
    }
    isUsingMicroTask = true
} else if(!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || MutationObserver.toString === '[object MutationObserverConstructor]')) {
    // 当 原生 Promise 不可用时，使用 原生 MutationObserver
    let counter = 1
    // 创建MO实例，监听到DOM变动后会执行回调flushCallbacks
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true // 设置true 表示观察目标的改变
    })
    // 每次执行timerFunc 都会让文本节点的内容在 0/1之间切换
    // 切换之后将新值复制到 MO 观测的文本节点上
    // 节点内容变化会触发回调
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter) // 触发回调
    }
    isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
   // setImmediate 宏任务队列,  setImmediate 性能优于 setTimeout 将flushCallbacks 放入浏览器的异步任务队列
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
} else {
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

/**
 * 做了三件事：
 *   1、将 pending 置为 false  表示下一个 flushCallbacks() 可以进入浏览器异步任务队列
 *   2、清空 callbacks 数组
 *   3、执行 callbacks 数组中的所有函数（比如 flushSchedulerQueue、用户调用 nextTick 传递的回调函数）
 */
function flushCallbacks () {
  // 微任务队列中只能有一个 flushCallbacks()
  pending = false
  const copies = callbacks.slice(0) // 清空 callbacks 数组
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow()
  //  flushing = true 表示 watcher 队列正在被刷新
  flushing = true
  let watcher, id
  // 确保 watcher 的先后顺序
  // watcher 队列排序  watcher 的id 由小到大有序递增  保证组件更新顺序  
  // 父组件的 watcher 先于子组件的 watcher 更新
  // 用户 watcher 先于 渲染 watcher 更新
  // 父组件的 watcher 在执行时 子组件的 watcher 销毁 可以跳过子组件的执行 
  queue.sort((a, b) => a.id - b.id)
  //  for 循环遍历 watcher 队列  依次执行 watcher 的 run 方法
  // queue.length 动态计算 确保是最新的队列
  for (index = 0; index < queue.length; index++) {
    // 拿出当前索引的 watcher
    watcher = queue[index]
    // 首先执行 brfore 钩子  执行beforeUpdate()
    if (watcher.before) {
      watcher.before() // watcher 实例化时 传入的 before 方法
    }
    // 清空缓存 表示当前 watcher 已经被执行  当该 watcher 再次入队时可以进入
    id = watcher.id
    has[id] = null
    // 执行 watcher 的run() 
    watcher.run()
    if (process.env.NODE_ENV !== 'production' && has[id] != null) {
      circular[id] = (circular[id] || 0) + 1
      if (circular[id] > MAX_UPDATE_COUNT) {
        warn(
          'You may have an infinite update loop ' + (
            watcher.user
              ? `in watcher with expression "${watcher.expression}"`
              : `in a component render function.`
          ),
          watcher.vm
        )
        break
      }
    }
  }
  // keep copies of post queues before resetting state
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
  resetSchedulerState()
  // call component updated and activated hooks
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)
  // devtool hook
  /* istanbul ignore if */
  if (devtools && config.devtools) {
    devtools.emit('flush')
  }
}