<input type="text" v-model="xiaoman1" />
<br />
<input type="text" v-model="xiaoman2" />
<br />
<input type="text" v-model="message.foo.bar" />
<br />
<input type="text" v-model="message2.foo.bar" />

const xiaoman1 = ref<string>("小滿1");
const xiaoman2 = ref<string>("小滿2");

const message = ref({
  foo: {
    bar: "aaaaa",
  },
});

const message2 = reactive({
  foo: {
    bar: "aaaaa",
  },
});

watch(xiaoman1, (newVal, oldVal) => {
  console.log("監(jiān)聽(tīng)單個(gè)數(shù)據(jù)源", newVal, oldVal);
});

// 用數(shù)組監(jiān)聽(tīng)多個(gè)數(shù)據(jù)源，[新值數(shù)組], [舊值數(shù)組]
watch([xiaoman1, xiaoman2], (newVal, oldVal) => {
  console.log("用數(shù)組監(jiān)聽(tīng)多個(gè)數(shù)據(jù)源，[新值數(shù)組], [舊值數(shù)組]", newVal, oldVal);
});

// ref 深層監(jiān)聽(tīng)
watch(
  message,
  (newVal, oldVal) => {
    // 如果是引用類(lèi)型，新值 和 舊值 是一樣的
    console.log("ref 深層監(jiān)聽(tīng)&立刻執(zhí)行", newVal, oldVal);
  },
  {
    deep: true, // 深度監(jiān)聽(tīng)，ref 若需要深度監(jiān)聽(tīng)，這里要開(kāi)啟
    immediate: true, // callback 立刻先執(zhí)行一次
    flush: "pre", // 【watch的執(zhí)行順序】 pre 組件更新之前調(diào)用（默認(rèn)）；sync 同步執(zhí)行；post 組件更新之后執(zhí)行
    // flush 屬性在 watch 中用的不多，watchEffect中可能用到
  }
);

// reactive 深層監(jiān)聽(tīng)：不必開(kāi)啟深度監(jiān)聽(tīng)
watch(
  message2,
  (newVal, oldVal) => {
    // 如果是引用類(lèi)型，新值 和 舊值 是一樣的
    console.log("reactive 深層監(jiān)聽(tīng)&立刻執(zhí)行", newVal, oldVal);
  },
  {
    // deep: true, // reactive 不必開(kāi)啟深度監(jiān)聽(tīng)，源碼已做了深層監(jiān)聽(tīng)
    // immediate: true,
  }
);

// 若只想監(jiān)聽(tīng) reactive 深層中的單個(gè)屬性，(第一個(gè)參數(shù))引用類(lèi)型可直接寫(xiě)，否則使用函數(shù)形式
watch(
  message2.foo, // 監(jiān)聽(tīng)到 foo，foo是引用類(lèi)型，直接寫(xiě)就行
  // () => message2.foo.bar, // 監(jiān)聽(tīng)到 bar，需要用函數(shù)形式

  (newVal, oldVal) => {
    // 如果是引用類(lèi)型，新值 和 舊值 是一樣的
    console.log("reactive 監(jiān)聽(tīng)深層中的單個(gè)屬性", newVal, oldVal);
  }
);

/**
 * 

 * @vue/runtime-core/runtime-core.cjs.prod.js 搜索 function watch
 *
 * -  watch(source, cb, options)
 *
 * -  source 有很多種類(lèi)型，reactive、ref、數(shù)組、函數(shù)，所以先判斷類(lèi)型，格式化source
 *    - ref 類(lèi)型，直接把 value 取出來(lái)，賦值給 getter
 *    - reactive 類(lèi)型，直接把整體賦值給 getter，deep 手動(dòng)置為 true 即可（reactive已經(jīng)進(jìn)行了深度監(jiān)聽(tīng)）
 *    - 數(shù)組類(lèi)型，做遍歷，對(duì)每一項(xiàng)再判斷類(lèi)型，分別處理完之后丟進(jìn)新數(shù)組返回
 *          - ref類(lèi)型，返回.value
 *          - reactive類(lèi)型，遞歸處理后返回
 *          - 函數(shù)的話，進(jìn)行加工
 *    - 函數(shù)類(lèi)型
 *          - 判斷有沒(méi)有 cb
 *              - 有 cb 的話，同樣也是對(duì)函數(shù)做了加工賦值給 getter
 *              - 沒(méi)有 cb，走進(jìn) watchEffect（下一章）
 *
 * - deep處理：
 *          - cb、deep 若同時(shí)存在，即 有回調(diào)函數(shù) 且設(shè)置了 深度監(jiān)聽(tīng)，進(jìn)行 traverse 遞歸深度監(jiān)聽(tīng)（當(dāng)然是更耗時(shí)的）
 *
 * - flush處理：先初始化出 scheduler 調(diào)度器
 *          - sync 同步執(zhí)行，scheduler = job
 *          - post 組件更新后，將 job 通過(guò) queuePostRenderEffect 函數(shù)處理后再賦值給 scheduler
 *                  - 注意，源碼中看到 queuePostRenderEffect 這個(gè)函數(shù)，一定表示是在組件更新之后再去執(zhí)行
 *          - pre 組件更新前，queueJob 處理 job 后賦值給 scheduler
 *
 * - ReactiveEffect 收集依賴(lài)更新：
 *          - 上面步驟 將 getter、scheduler處理好后作為參數(shù) 給到 ReactiveEffect 函數(shù)
 *          - ReactiveEffect 收集好依賴(lài)之后，有更新的話 就會(huì)觸發(fā) scheduler，也就是說(shuō)會(huì)執(zhí)行 job
 *
 *
 * - cb 存在
 *          - immediate 為 true 時(shí)，會(huì)立即調(diào)用一下 job
 *                - 內(nèi)部會(huì)先獲取到新值 newVal
 *                - 如果是第一次執(zhí)行，舊值 oldVal 會(huì)置為 undefined
 *                - （執(zhí)行完這里才會(huì)更新）然后 把新值賦值給舊值，為下一次使用準(zhǔn)備 （所以如果是對(duì)象，新舊值是相等的）
 *          - immediate 為 false 時(shí),
 *                - 先給舊值做初始化，如 oldVal = '小滿'
 *                - 依賴(lài)如果更新，會(huì)觸發(fā) scheduler，執(zhí)行 job
 *                      - job 內(nèi)新值 newVal = '小滿1'
 *                      - 舊值 oldVal 不會(huì)走進(jìn) undefined，會(huì)等于原有的 oldVal = '小滿'
 *                      - （執(zhí)行完這里才會(huì)更新）會(huì)把 oldVal = '小滿1'
 *
 *
 */