/**
 * 根據(jù) watcher 配置項，決定接下來怎么走，一般是 queueWatcher
 */
update () {
  /* istanbul ignore else */
  if (this.lazy) {
    // 懶執(zhí)行時走這里，比如 computed
    // 將 dirty 置為 true，可以讓 computedGetter 執(zhí)行時重新計算 computed 回調(diào)函數(shù)的執(zhí)行結(jié)果
    this.dirty = true
  } else if (this.sync) {
    // 同步執(zhí)行，在使用 vm.$watch 或者 watch 選項時可以傳一個 sync 選項，
    // 當為 true 時在數(shù)據(jù)更新時該 watcher 就不走異步更新隊列，直接執(zhí)行 this.run 
    // 方法進行更新
    // 這個屬性在官方文檔中沒有出現(xiàn)
    this.run()
  } else {
    // 更新時一般都這里，將 watcher 放入 watcher 隊列
    queueWatcher(this)
  }
}

/**
 * 將 watcher 放入 watcher 隊列 
 */
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  // 如果 watcher 已經(jīng)存在，則跳過，不會重復(fù)入隊
  if (has[id] == null) {
    // 緩存 watcher.id，用于判斷 watcher 是否已經(jīng)入隊
    has[id] = true
    if (!flushing) {
      // 當前沒有處于刷新隊列狀態(tài)，watcher 直接入隊
      queue.push(watcher)
    } else {
      // 已經(jīng)在刷新隊列了
      // 從隊列末尾開始倒序遍歷，根據(jù)當前 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 表示當前瀏覽器的異步任務(wù)隊列沒有 flushSchedulerQueue 
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        // 直接去刷新 watcher 調(diào)度隊列 
        // 一般不會走這兒，Vue 默認是異步執(zhí)行，如果改為同步執(zhí)行，性能會大打折扣
        flushSchedulerQueue()
        return
      }
      /**
       *   熟悉的 nextTick => vm.$nextTick、Vue.nextTick
       *   1、將 回調(diào)函數(shù)（flushSchedulerQueue） 放入 callbacks 數(shù)組
       *   2、通過 pending 控制向瀏覽器任務(wù)隊列中添加 flushCallbacks 函數(shù)
       */
      nextTick(flushSchedulerQueue)
    }
  }
}

export function nextTick(cb? Function, ctx: Object) {
    let _resolve
    // cb 即為傳入的 flushSchedulerQueue函數(shù)，會統(tǒng)一處理壓入callbacks數(shù)組
    // callbacks也就是異步操作隊列
    callbacks.push(() => {
        if(cb) {
            try {
                cb.call(ctx)  // 調(diào)用 flushSchedulerQueue 函數(shù)，將其放入 callbacks異步隊列
            } catch(e) {
                handleError(e, ctx, 'nextTick')
            }
        } else if (_resolve) {
            _resolve(ctx)
        }
    })
    // pending 為false 說明本輪事件循環(huán)中沒有執(zhí)行過timerFunc()
    if(!pending) {
        pending = true
        timerFunc()
    }
    // 當不傳入 cb 參數(shù)時，提供一個promise化的調(diào)用 
    if(!cb && typeof Promise !== 'undefined') {
      // 如nextTick().then(() => {})
      // 當_resolve執(zhí)行時，就會跳轉(zhuǎn)到then邏輯中
        return new Promise(resolve => {
            _resolve = resolve
        })
    }
}

// 創(chuàng)建MO實例
const observer = new MutationObserver(callback)
const textNode = '想要監(jiān)聽的Don節(jié)點'
observer.observe(textNode, {
  characterData: true // 說明監(jiān)聽文本內(nèi)容的修改
})

/**
 * flushCallbacks 做了三件事：
 *   1、將 pending 置為 false  表示下一個 flushCallbacks() 可以進入瀏覽器異步任務(wù)隊列
 *   2、清空 callbacks 數(shù)組
 *   3、執(zhí)行 callbacks 數(shù)組中的所有函數(shù)（比如 flushSchedulerQueue、用戶調(diào)用 nextTick 傳遞的回調(diào)函數(shù)）
 */
// 對callbacks進行遍歷，然后執(zhí)行相應(yīng)的回調(diào)函數(shù)
function flushCallbacks () {
    pending = false
    // 這里拷貝的原因是：
    // 有的cb 執(zhí)行過程中又會往 callbacks 中加入內(nèi)容
    // 比如 $nextTick的回調(diào)函數(shù)里還有$nextTick
    // 后者的應(yīng)該放到下一輪的nextTick 中執(zhí)行
    // 所以拷貝一份當前的，遍歷執(zhí)行完當前的即可，避免無休止的執(zhí)行下去
    const copies = callbcks.slice(0)
    callbacks.length = 0 // callbacks里面的函數(shù)
    for(let i = 0; i < copies.length; i++) {
        copies[i]() // 執(zhí)行 callbacks 數(shù)組中的每一個函數(shù)
    }
}
let timerFunc // 異步執(zhí)行函數(shù) 用于異步延遲調(diào)用 flushCallbacks 函數(shù)
// 優(yōu)先使用 Promise  首選 Promise.resolve().then()
if(typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
   // 首選 Promise.resolve().then()
    timerFunc = () => {
        // 在 微任務(wù)隊列 中放入 flushCallbacks 函數(shù) 
        p.then(flushCallbacks)
        // IOS 的UIWebView, Promise.then 回調(diào)被推入 microTask 隊列，但是隊列可能不會如期執(zhí)行
        // 因此，添加一個空計時器強制執(zhí)行 microTask
        if(isIOS) setTimeout(noop)
    }
    isUsingMicroTask = true
} else if(!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || MutationObserver.toString === '[object MutationObserverConstructor]')) {
    // 當 原生 Promise 不可用時，使用 原生 MutationObserver
    let counter = 1
    // 創(chuàng)建MO實例，監(jiān)聽到DOM變動后會執(zhí)行回調(diào)flushCallbacks
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true // 設(shè)置true 表示觀察目標的改變
    })
    // 每次執(zhí)行timerFunc 都會讓文本節(jié)點的內(nèi)容在 0/1之間切換
    // 切換之后將新值復(fù)制到 MO 觀測的文本節(jié)點上
    // 節(jié)點內(nèi)容變化會觸發(fā)回調(diào)
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter) // 觸發(fā)回調(diào)
    }
    isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
   // setImmediate 宏任務(wù)隊列,  setImmediate 性能優(yōu)于 setTimeout 將flushCallbacks 放入瀏覽器的異步任務(wù)隊列
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
} else {
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

/**
 * 做了三件事：
 *   1、將 pending 置為 false  表示下一個 flushCallbacks() 可以進入瀏覽器異步任務(wù)隊列
 *   2、清空 callbacks 數(shù)組
 *   3、執(zhí)行 callbacks 數(shù)組中的所有函數(shù)（比如 flushSchedulerQueue、用戶調(diào)用 nextTick 傳遞的回調(diào)函數(shù)）
 */
function flushCallbacks () {
  // 微任務(wù)隊列中只能有一個 flushCallbacks()
  pending = false
  const copies = callbacks.slice(0) // 清空 callbacks 數(shù)組
  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 在執(zhí)行時 子組件的 watcher 銷毀 可以跳過子組件的執(zhí)行 
  queue.sort((a, b) => a.id - b.id)
  //  for 循環(huán)遍歷 watcher 隊列  依次執(zhí)行 watcher 的 run 方法
  // queue.length 動態(tài)計算 確保是最新的隊列
  for (index = 0; index < queue.length; index++) {
    // 拿出當前索引的 watcher
    watcher = queue[index]
    // 首先執(zhí)行 brfore 鉤子  執(zhí)行beforeUpdate()
    if (watcher.before) {
      watcher.before() // watcher 實例化時 傳入的 before 方法
    }
    // 清空緩存 表示當前 watcher 已經(jīng)被執(zhí)行  當該 watcher 再次入隊時可以進入
    id = watcher.id
    has[id] = null
    // 執(zhí)行 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')
  }
}