vue源码分析之nextTick源码分析-逐行逐析-个人困惑

nextTick的使用背景

• 在vue项目中，经常会使用到nextTick这个api，一直在猜想其是怎么实现的，今天有幸研读了下，虽然源码又些许问题，但仍值得借鉴

核心源码解析

判断当前环境使用最合适的API并保存函数

promise

• 判断是否支持promise，如果支持就使用Promise对象的then方法包裹要执行的 flushCallbacks函数

MutationObserver

• 判断是否支持MutationObserver，如果支持就创建一个MutationObserver 用于监听dom改动之后执行 flushCallbacks 函数 并赋值给 observer

setImmediate

• 判断是否支持setImmediate，如果支持就使用setImmediate包裹 flushCallbacks函数

setTimeout

• 如果以上三种都不支持使用setTimeout包裹 flushCallbacks函数

export let isUsingMicroTask = false//是否使用微任务标志

const callbacks = []//任务对列 调用nextTick时传入的回调函数组成的数组
let pending = false//初始化 是否在进行中状态  默认是false  

function flushCallbacks() {
   
  //循环执行 callbacks  任务队列中的任务
  pending = false
  const copies = callbacks.slice(0)//
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   
    // 依次执行callbacks数组中的函数
    copies[i]()
  }
}

let timerFunc

if (typeof Promise !== 'undefined' && isNative(Promise)) {
   
  // 向下兼容操作 如果支持Promise 则使用Promise
  const p = Promise.resolve()//直接返回一个resolved状态的Promise对象
  timerFunc = () => {
   
    p.then(flushCallbacks)
    // 在Promise的then方法中执行 flushCallbacks 函数
    if (isIOS) setTimeout(noop)//ios中在一些异常的webview中，promise结束后任务队列并没有刷新，所以强制执行setTimeout(noop)来刷新任务队列
  }
  isUsingMicroTask = true//重置使用微任务标示为true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||

  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
   
// MutationObserver 属性支持，则使用MutationObserver 
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  // 创建一个MutationObserver 用于监听dom改动之后执行 flushCallbacks 函数 并赋值给 observer
  const textNode = document.createTextNode(String(counter))
  // 创建一个文本节点
  observer.