//遞歸:當(dāng)前父親正在執(zhí)行一個任務(wù),在執(zhí)行任務(wù)
//期間又添加了一個新的任務(wù),這個新的任務(wù)與當(dāng)前
//執(zhí)行的任務(wù)是同一個任務(wù),跳過去重的檢驗
//如果不允許遞歸,那么任務(wù)不會被添加到隊列中
function queueJob(job) {
  //job自身允許遞歸,那么跳過去重檢查(只跳過當(dāng)前執(zhí)行任務(wù)的去重檢查)
  if (
    !queue.length ||
    !queue.includes(
      job,
      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
    )
  ) {
    //如果任務(wù)沒有id代表沒有優(yōu)先級
    //放到任務(wù)隊列的最后面
    if (job.id == null) {
      queue.push(job);
    }
    //利用二分法找到任務(wù)優(yōu)先級需要插入的位置
    else {
      queue.splice(findInsertionIndex(job.id), 0, job);
    }
    //執(zhí)行任務(wù)
    queueFlush();
  }
}

const job = function(){}
job.id:Number //用于設(shè)置當(dāng)前任務(wù)的優(yōu)先級越小的值優(yōu)先級越高。
job.allowRecurse:Boolean //是否允許遞歸。
job.pre:Boolean //用于判斷是否是前置任務(wù)。
job.active:Boolean //當(dāng)前任務(wù)是否可以執(zhí)行。為false在執(zhí)行階段跳過執(zhí)行。

//找到插入的位置
//例如[1,2,3,8,9,10,100]
//當(dāng)前插入的id為20
//插入后應(yīng)該為[1,2,3,8,9,10,20,100]
//也就是說最終返回的start=6
//插入流程解析:
//1.假設(shè)當(dāng)前執(zhí)行到第二個任務(wù)即flushIndex=2
//那么start = 2;end = 7;middle=4;
//    middleJobId=9;9<20 start=5;
//繼續(xù)循環(huán):middle=6;middleJobId=100;end=6
//結(jié)束循環(huán)start = 6;這就是需要插入的位置
function findInsertionIndex(id) {
  let start = flushIndex + 1;
  let end = queue.length;
  while (start < end) {
    // 1000>>>1=>100 8=>4
    // 1100>>>1=>110 12=>6
    // 1010>>>1=>101 10=>5
    // 1001>>>1=>100 9=>4
    //計算出中間值,向下取整
    const middle = (start + end) >>> 1;
    //獲取job的id
    const middleJobId = getId(queue[middle]);
    middleJobId < id ? (start = middle + 1) : (end = middle);
  }
  return start;
}
//獲取當(dāng)前任務(wù)的id
const getId = (job) => (job.id == null ? Infinity : job.id);

function queueFlush() {
  //當(dāng)前沒有執(zhí)行任務(wù)且沒有任務(wù)可執(zhí)行
  if (!isFlushing && !isFlushPending) {
    //等待任務(wù)執(zhí)行
    isFlushPending = true;
    //將flushJobs放入微任務(wù)隊列
    currentFlushPromise = resolvedPromise.then(flushJobs);
  }
}

function flushJobs(seen) {
  isFlushPending = false; //當(dāng)前不是等待狀態(tài)
  isFlushing = true; //當(dāng)前正在執(zhí)行任務(wù)
  seen = seen || new Map();
  //原文譯文:
  //在flush之前對queue排序這樣做是為了:
  //1.組件更新是重父組件到子組件(因為父組件總是在子組件之前創(chuàng)建
  //所以父組件的render副作用將會有更低的優(yōu)先級
  //2.如果子組件在父組件更新期間并未掛載,那么可以跳過
  queue.sort(comparator);
  //監(jiān)測當(dāng)前任務(wù)是否已經(jīng)超過了最大遞歸層數(shù)
  const check = (job) => checkRecursiveUpdates(seen, job);
  try {
    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
      const job = queue[flushIndex];
      if (job && job.active !== false) {
        if (check(job)) {
          continue;
        }
        callWithErrorHandling(job, null, 14);
      }
    }
  } finally {
    //執(zhí)行完所有的任務(wù)之后,初始化queue
    //調(diào)用post任務(wù),這些任務(wù)調(diào)用完折后
    //可能在執(zhí)行這些任務(wù)的途中還有新的
    //任務(wù)加入所以需要繼續(xù)執(zhí)行flushJobs
    flushIndex = 0;
    queue.length = 0;
    flushPostFlushCbs(seen);
    isFlushing = false;
    currentFlushPromise = null;
    if (queue.length || pendingPostFlushCbs.length) {
      flushJobs(seen);
    }
  }
}

function queuePostFlushCb(cb) {
  if (!shared.isArray(cb)) {
    if (
      !activePostFlushCbs ||
      !activePostFlushCbs.includes(
        cb,
        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
      )
    ) {
      pendingPostFlushCbs.push(cb);
    }
  } else {
    pendingPostFlushCbs.push(...cb);
  }
  queueFlush();
}

function queueEffectWithSuspense(fn, suspense) {
  //對suspense的處理,暫時不詳細(xì)解釋
  if (suspense && suspense.pendingBranch) {
    if (shared.isArray(fn)) {
      suspense.effects.push(...fn);
    } else {
      suspense.effects.push(fn);
    }
  } else {
    //如果是普通的任務(wù)則放入后置隊列
    queuePostFlushCb(fn);
  }
}

function flushPostFlushCbs(seen) {
  if (pendingPostFlushCbs.length) {
    //克隆等待執(zhí)行的pendingPost
    const deduped = [...new Set(pendingPostFlushCbs)];
    pendingPostFlushCbs.length = 0; //設(shè)置為0
    //當(dāng)前函數(shù)是后置隊列的任務(wù)發(fā)起的,那么不能
    //直接運(yùn)行任務(wù),而是將任務(wù)放到avtivePostFlushCbs任務(wù)之后
    if (activePostFlushCbs) {
      activePostFlushCbs.push(...deduped);
      return;
    }
    activePostFlushCbs = deduped;
    seen = seen || new Map();
    //排序(post依然有優(yōu)先級)
    activePostFlushCbs.sort((a, b) => getId(a) - getId(b));
    for (
      postFlushIndex = 0;
      postFlushIndex < activePostFlushCbs.length;
      postFlushIndex++
    ) {
      //檢測執(zhí)行深度
      if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) {
        continue;
      }
      //調(diào)用這個postJob
      activePostFlushCbs[postFlushIndex]();
    }
    //初始化
    activePostFlushCbs = null;
    postFlushIndex = 0;
  }
}

function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
  seen = seen || new Map();
  for (; i < queue.length; i++) {
    const cb = queue[i];
    if (cb && cb.pre) {
      if (checkRecursiveUpdates(seen, cb)) {
        continue;
      }
      queue.splice(i, 1);
      i--;
      cb();
    }
  }
}

job.pre = true

function a(){
  console.log(222)
}
function b(){
  console.log(111)
}
a.pre = true
queueJobs(a)
queueJobs(b)
flushPreFlushCbs()
//打印:222 111

<script> 
import { nextTick } from 'vue' 
export default {  
  data() {   
    return { count: 0 } }, 
    methods: { 
      async increment() { 
        this.count++ // DOM 還未更新
        // 0
        console.log(document.getElementById('counter').textContent)
        await nextTick() // DOM 此時已經(jīng)更新 
        console.log(document.getElementById('counter').textContent) // 1 
        } 
     } 
 } 
 </script>
 <template> 
   <button id="counter" @click="increment">{{ count }}</button> 
 </template>

function nextTick(fn) {
  const p = currentFlushPromise || resolvedPromise;
  return fn ? p.then(this ? fn.bind(this) : fn) : p;
}

function queueFlush() {
  if (!isFlushing && !isFlushPending) {
    isFlushPending = true;
    currentFlushPromise = resolvedPromise.then(flushJobs);
  }
}

<script>
export default {
  watch{
    a(){},
    b:"meth"http://在methods中聲明的方法
    c:{
      handler(val,oldVal){},
      deep:true,//開啟深度監(jiān)視
      immediate:true//立即調(diào)用handler
    },
    "d.a":function(){}
  }
}
</script>

const callback = ([aOldVal,aVal],[bOldVal,bVal])=>{}
//監(jiān)聽源 監(jiān)聽源發(fā)生改變的回調(diào)函數(shù) 選項
watch(["a","b"], callback, {
  flush: 'post',
  onTrack(e) {
    debugger
  },
  deep:true,
  immediate:true,
})

//這一段代碼在Vue3源碼分析(7)中出現(xiàn)過
//不了解的可以看看上一篇文章
//對每一個watch選項添加watcher
if (watchOptions) {
  for (const key in watchOptions) {
    createWatcher(watchOptions[key], ctx, publicThis, key);
  }
}

function createWatcher(raw, ctx, publicThis, key) {
  //可以監(jiān)聽深度數(shù)據(jù)例如a.b.c
  const getter = key.includes(".")
    ? createPathGetter(publicThis, key)
    : () => publicThis[key];
  //raw可以是字符串,會讀取methods中的方法
  if (shared.isString(raw)) {
    const handler = ctx[raw];
    if (shared.isFunction(handler)) {
      //進(jìn)行監(jiān)聽
      watch(getter, handler);
    } else {
      warn(`Invalid watch handler specified by key "${raw}"`, handler);
    }
  }
  //如果是函數(shù) 監(jiān)聽
  else if (shared.isFunction(raw)) {
    watch(getter, raw.bind(publicThis));
  }
  //如果是對象
  else if (shared.isObject(raw)) {
    //數(shù)組遍歷,獲取每一個監(jiān)聽器在執(zhí)行createWatcher
    if (shared.isArray(raw)) {
      raw.forEach((r) => createWatcher(r, ctx, publicThis, key));
    }
    //對象
    else {
      //handler可能是字符串重ctx上獲取
      //也可能是函數(shù)
      //獲取到handler后調(diào)用watch
      const handler = shared.isFunction(raw.handler)
        ? raw.handler.bind(publicThis)
        : ctx[raw.handler];
      if (shared.isFunction(handler)) {
        watch(getter, handler, raw);
      } else {
        warn(
          `Invalid watch handler specified by key "${raw.handler}"`,
          handler
        );
      }
    }
  } else {
    warn(`Invalid watch option: "${key}"`, raw);
  }
}

function watch(source, cb, options) {
  //cb必須是函數(shù)
  if (!shared.isFunction(cb)) {
    console.warn();
  }
  return doWatch(source, cb, options);
}

function doWatch(
  source, //getter ()=>[監(jiān)聽的數(shù)據(jù)]
  cb, //回調(diào)函數(shù)
  //獲取當(dāng)前watch的選項
  { immediate, deep, flush, onTrack, onTrigger } = shared.EMPTY_OBJ
) {
  //immediate和deep屬性必須有cb
  if (!cb) {
    if (immediate !== undefined) {
      warn(
        `watch() "immediate" option is only respected when using the ` +
          `watch(source, callback, options?) signature.`
      );
    }
    if (deep !== undefined) {
      warn(
        `watch() "deep" option is only respected when using the ` +
          `watch(source, callback, options?) signature.`
      );
    }
  }
  //省略第二部分代碼
 }

//獲取當(dāng)前實(shí)例
const instance = getCurrentInstance();
let getter;
let forceTrigger = false; //強(qiáng)制觸發(fā)
let isMultiSource = false; //是否多個數(shù)據(jù)
//判斷監(jiān)聽的數(shù)據(jù)是否是ref
if (reactivity.isRef(source)) {
  getter = () => source.value;
  forceTrigger = reactivity.isShallow(source);
}
//判斷數(shù)據(jù)是否是響應(yīng)式
else if (reactivity.isReactive(source)) {
  getter = () => source;
  deep = true;
}
//判斷數(shù)據(jù)是否是數(shù)組
else if (shared.isArray(source)) {
  isMultiSource = true;
  //source中有一個是響應(yīng)式的
  //就需要觸發(fā)
  forceTrigger = source.some(
    (s) => reactivity.isReactive(s) || reactivity.isShallow(s)
  );
  //()=>[proxy,()=>proxy,ref]
  getter = () =>
    source.map((s) => {
      if (reactivity.isRef(s)) {
        return s.value;
      } else if (reactivity.isReactive(s)) {
        //遍歷響應(yīng)式對象s 這個getter會作為ReactiveEffect的
        //第一個參數(shù),在調(diào)用run的時候遍歷所有的值
        //確保能讓每一個變量都能收集到effect
        return traverse(s);
      }
      //調(diào)用監(jiān)聽的函數(shù)
      else if (shared.isFunction(s)) {
        return callWithErrorHandling(s, instance, 2);
      } else {
        //提示非法source信息
        warnInvalidSource(s);
      }
    });
}
//省略第三部分代碼

//()=>[proxy]傳入的是一個函數(shù)
else if (shared.isFunction(source)) {
  if (cb) {
    //讓getter為這個函數(shù)
    getter = () => callWithErrorHandling(source, instance, 2);
  } else {
    //如果沒有回調(diào)函數(shù)
    getter = () => {
      if (instance && instance.isUnmounted) {
        return;
      }
      if (cleanup) {
        cleanup();
      }
      return callWithAsyncErrorHandling(source, instance, 3, [onCleanup]);
    };
  }
}
//省略第四部分代碼

watch(async (onCleanup) => {
  const { response, cancel } = doAsyncWork(id.value)
  // `cancel` 會在 `id` 更改時調(diào)用
  // 以便取消之前
  // 未完成的請求
  onCleanup(cancel)
  data.value = await response
})

//不是以上情況,讓getter為空函數(shù)
else {
  getter = shared.NOOP;
  //警告
  warnInvalidSource(source);
}
//省略第五部分代碼

const INITIAL_WATCHER_VALUE = {}
//getter作為參數(shù)傳入ReactiveEffect
//調(diào)用run的時候會調(diào)用getter,確保
//所有的屬性都能夠收集到依賴
if (cb && deep) {
  const baseGetter = getter;
  getter = () => traverse(baseGetter());
}
let cleanup;
//調(diào)用effect.stop的時候觸發(fā)這個函數(shù)
let onCleanup = (fn) => {
  cleanup = effect.onStop = () => {
    callWithErrorHandling(fn, instance, 4);
  };
};
let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE;
//省略第六部分代碼

//回調(diào)函數(shù)
 const job = () => {
  if (!effect.active) {
    return;
  }
  //傳遞了cb函數(shù)
  if (cb) {
    //watch([a,b],()=>{})
    //newValue=[a,b]
    const newValue = effect.run();
    //未設(shè)置deep屬性的
    //舊值和新值要發(fā)生改變才會調(diào)用cb回調(diào)函數(shù)
    if (
      deep ||
      forceTrigger ||
      (isMultiSource
        ? newValue.some((v, i) => shared.hasChanged(v, oldValue[i]))
        : shared.hasChanged(newValue, oldValue))
    ) {
      //這里的作用上面我們已經(jīng)講過了,不在贅述。
      if (cleanup) {
        cleanup();
      }
      callWithAsyncErrorHandling(cb, instance, 3, [
        newValue,
        oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
        onCleanup,
      ]);
      oldValue = newValue;
    }
  } else {
    //沒有cb就只調(diào)用getter函數(shù)(watchEffect)
    effect.run();
  }
};
//省略第七部分代碼

//只要有cb則允許遞歸
job.allowRecurse = !!cb;
let scheduler;
//設(shè)置了sync則同步調(diào)度,不放入queue進(jìn)行異步調(diào)度(同步)
if (flush === "sync") {
  scheduler = job;
}
//設(shè)置了post放到DOM渲染之后執(zhí)行(異步)
else if (flush === "post") {
  scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
}
//默認(rèn)值為pre,放入到queue中執(zhí)行(異步)
//帶有pre的會在DOM渲染前執(zhí)行
else {
  job.pre = true;
  //給當(dāng)前的job設(shè)置優(yōu)先級
  if (instance) job.id = instance.uid;
    scheduler = () => queueJob(job);
}
//省略第八部分代碼

const effect = new reactivity.ReactiveEffect(getter, scheduler);
//將用戶傳遞的onTrack和onTrigger賦值到effect上
//便于在track和trigger的時候調(diào)用
effect.onTrack = onTrack;
effect.onTrigger = onTrigger;
//省略第九部分代碼

//調(diào)用了watch之后
//需要立刻執(zhí)行g(shù)etter,處理不同的flush參數(shù)
if (cb) {
  if (immediate) {
    //有immediate參數(shù)立即執(zhí)行job
    job();
  }
  //否則就只收集依賴調(diào)用getter函數(shù)
  //并且獲取監(jiān)聽的變量
  else {
    oldValue = effect.run();
  }
}
//flush為post需要將收集依賴函數(shù)getter
//放到postQueue中
else if (flush === "post") {
  queuePostRenderEffect(
    effect.run.bind(effect),
    instance && instance.suspense
  );
}
//沒有設(shè)置則收集依賴
else {
  effect.run();
}
//省略第十部分代碼

//watch的停止函數(shù),調(diào)用后不再依賴更新
return () => {
  effect.stop();
};