<script lang="ts" setup>
	// 接受父組件傳遞的數(shù)據(jù)
    const props = defineProps({
        test: {
            type: String,
            default: ''
        }
    })
    
    // 使用 watch 偵聽(tīng) props 中的 test 屬性
    watch(
        // 這種寫(xiě)法不會(huì)偵聽(tīng)到 props 中 test 的變化
    	props.test,
        () => {
            console.log("偵聽(tīng)成功")
        }
    )
    
    watch(
    	// 這種寫(xiě)法會(huì)偵聽(tīng)到 props 中 test 的變化
        () => props.test,
        () => {
            console.log("偵聽(tīng)成功")
        }
    )
</script>

const obj = reactive({ count: 0 })

// 錯(cuò)誤，因?yàn)?watch() 中的偵聽(tīng)源是一個(gè) number，最終 source 返回的 getter 函數(shù)是一個(gè)空，所以就得不到偵聽(tīng)的數(shù)據(jù)
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

// 正確，主要思想是，將偵聽(tīng)源轉(zhuǎn)化為以上4種類(lèi)型（轉(zhuǎn)化為getter函數(shù)是最簡(jiǎn)單方便的）
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {
  if (__DEV__ && !isFunction(cb)) {
    warn(
      `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
      `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
      `supports \`watch(source, cb, options?) signature.`
    )
  }
  return doWatch(source as any, cb, options)
}

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
  // ...
// 當(dāng)前組件實(shí)例
const instance = currentInstance
// 副作用函數(shù)，在初始化effect時(shí)使用
let getter: () => any
// 強(qiáng)制觸發(fā)偵聽(tīng)
let forceTrigger = false
// 是否為多數(shù)據(jù)源。
let isMultiSource = false
}

if (isRef(source)) {
  getter = () => source.value
  forceTrigger = isShallow(source)
}

if (isReactive(source)) {
  getter = () => source
  deep = true
}

<template>
  <div class="container">
    <h2>obj---{{ obj }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年齡</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
const obj = reactive({
  name: "張三",
  age: 18,
});
const changeName = () => {
  obj.name += "++";
};
const changeAge = () => {
  obj.age += 1;
};
// obj 中的任一屬性變化了，都會(huì)被監(jiān)聽(tīng)到
watch(obj, () => {
  console.log("變化了");
});
</script>

if (isArray(source)) {
  isMultiSource = true
  forceTrigger = source.some(isReactive)
  getter = () =>
    source.map(s => {
      if (isRef(s)) {
        return s.value
      } else if (isReactive(s)) {
        return traverse(s)
      } else if (isFunction(s)) {
        return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
      } else {
        __DEV__ && warnInvalidSource(s)
      }
    })
}

if (isFunction(source)) {
  if (cb) {
    getter = () =>
      callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
  } else {
    // watchEffect
    getter = () => {
      // 如果組件實(shí)例已經(jīng)卸載，直接return
      if (instance && instance.isUnmounted) {
        return
      }
      // 如果清理函數(shù)，則執(zhí)行清理函數(shù)
      if (cleanup) {
        cleanup()
      }
      // 執(zhí)行source，傳入onCleanup，用來(lái)注冊(cè)清理函數(shù)
      return callWithAsyncErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,
        [onCleanup]
      )
    }
  }
}

getter = NOOP
__DEV__ && warnInvalidSource(source)