// watch 函数接收两个参数，source 是响应式数据，cb 是回调函数
function watch(source, cb) {
  effect(
    // 触发读取操作，从而建立联系
    () => source.foo,
    {
      scheduler() {
        // 当数据变化时，调用回调函数 cb
        cb();
      },
    }
  );
}

export type WatchCallback<V = any, OV = any> = (
  value: V,
  oldValue: OV,
  onCleanup: OnCleanup
) => any;

export interface WatchOptionsBase extends DebuggerOptions {
flush?: 'pre' | 'post' | 'sync'
}

export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
immediate?: Immediate
deep?: boolean
}

function doWatch(
source: WatchSource | WatchSource[] | WatchEffect | object,
cb: WatchCallback | null,
{ immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle

const instance = currentInstance;
let getter: () => any;
// 是否需要强制触发副作用函数执行
let forceTrigger = false;
// 侦听的是否是多个源
let isMultiSource = false;

if (isRef(source)) {
  // 侦听的数据源是 ref
  getter = () => source.value;
  // 判断数据源是否是浅响应
  forceTrigger = isShallow(source);
}

 else if (isReactive(source)) {
// 侦听的数据源是响应式数据
getter = () => source
deep = true
}

 else if (isArray(source)) {
// 侦听的数据源是一个数组，即同时侦听多个源
isMultiSource = true
forceTrigger = source.some(isReactive)
getter = () =>
// 遍历数组，判断每个源的类型
source.map(s => {
if (isRef(s)) {
// 侦听的数据源是 ref
 return s.value
} else if (isReactive(s)) {
// 侦听的数据源是响应式数据
return traverse(s)
} else if (isFunction(s)) {
// 侦听的数据源是一个具有返回值的 getter 函数
return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
} else {
**DEV** && warnInvalidSource(s)
}
})
}

 else if (isFunction(source)) {

// 处理 watch 和 watchEffect 的场景
// watch 的第二个参数可以是一个具有返回值的 getter 参数，第二个参数是一个回调函数
// watchEffect 的参数是一个 函数

// 侦听的数据源是一个具有返回值的 getter 函数
if (cb) {
// getter with cb
// 处理的是 watch 的场景
// 执行 source 函数，将执行结果赋值给 getter
 getter = () =>
callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
} else {
// no cb -> simple effect
// 没有回调，即为 watchEffect 的场景
 getter = () => {
// 件实例已经卸载，则不执行，直接返回
if (instance && instance.isUnmounted) {
return
}
// 清除依赖
if (cleanup) {
cleanup()
}
// 执行 source 函数
return callWithAsyncErrorHandling(
source,
instance,
ErrorCodes.WATCH_CALLBACK,
[onCleanup]
)
}
}
}

// 处理的是 watch 的场景
// 递归读取对象的属性值
if (cb && deep) {
  const baseGetter = getter;
  getter = () => traverse(baseGetter());
}

// 清除副作用函数
let cleanup: () => void;
let onCleanup: OnCleanup = (fn: () => void) => {
  cleanup = effect.onStop = () => {
    callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP);
  };
};

// 将 scheduler 调度函数封装为一个独立的 job 函数，便于在初始化和变更时执行它
const job: SchedulerJob = () => {
if (!effect.active) {
return
}
// watch
if (cb) {
// 处理 watch 的场景
// watch(source, cb)

    // 执行副作用函数获取新值
    const newValue = effect.run()

    // 如果数据源是响应式数据或者需要强制触发副作用函数执行或者新旧值发生了变化
    // 则执行回调函数，并更新旧值
    if (
      deep ||
      forceTrigger ||
      (isMultiSource
        ? (newValue as any[]).some((v, i) =>
            hasChanged(v, (oldValue as any[])[i])
          )
        : hasChanged(newValue, oldValue)) ||
      (__COMPAT__ &&
        isArray(newValue) &&
        isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
    ) {

      // 当回调再次执行前先清除副作用
      // cleanup before running cb again
      if (cleanup) {
        cleanup()
      }

      // 执行watch 函数的回调函数 cb，将旧值和新值作为回调函数的参数
      callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
        newValue,

        // 首次调用时，将 oldValue 的值设置为 undefined
        // pass undefined as the old value when it's changed for the first time
        oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
        onCleanup
      ])
      // 更新旧值，不然下一次会得到错误的旧值
      oldValue = newValue
    }

} else {
// watchEffect
// 处理 watchEffect 的场景
effect.run()
}
}

// important: mark the job as a watcher callback so that scheduler knows
// it is allowed to self-trigger (#1727)
// 打个标记-让调度器任务作为侦听器的回调，这样调度器就能知道允许自己派发更新
job.allowRecurse = !!cb;

// 这里处理的是回调函数的执行时机
let scheduler: EffectScheduler
if (flush === 'sync') {
// 同步执行，将 job 直接赋值给调度器
scheduler = job as any // the scheduler function gets called directly
} else if (flush === 'post') {
// 将调度函数 job 添加到微任务队列中执行
scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
} else {
// default: 'pre'
// 调度器函数默认的执行模式
scheduler = () => {
if (!instance || instance.isMounted) {
// 组件挂载后将 job 推入一个优先执行时机的队列中
queuePreFlushCb(job)
} else {
// 在 pre 选型中，第一次调用必须发生在组件挂载之前
// 所以这次调用是同步的
job()
}
}
}

// 创建一个副作用函数
const effect = new ReactiveEffect(getter, scheduler);

if (cb) {
  // 选项参数 immediate 来指定回调是否需要立即执行
  if (immediate) {
    // 回调函数会在 watch 创建时立即执行一次
    job();
  } else {
    // 手动调用副作用函数，拿到的就是旧值
    oldValue = effect.run();
  }
}

 else if (flush === 'post') {
// 在调度器函数中判断 flush 是否为 'post'，如果是，将其放到微任务队列中执行
queuePostRenderEffect(
effect.run.bind(effect),
instance && instance.suspense
)
}

 else {
// 其余情况立即执行副作用
effect.run()
}

<template>
  <div id="myDiv">{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from "vue";

export default {
  setup() {
    const message = ref("Hello, Vue3!");
    const myDiv = ref<HTMLDivElement | null>(null);
    watch(
      message,
      async (newVal, oldVal) => {
        await nextTick();
        const width = myDiv.value.offsetWidth;
        const height = myDiv.value.offsetHeight;
        console.log(`Width: ${width}, Height: ${height}`);
      },
      { flush: "post" }
    );
  },
};
</script>

 return () => {
effect.stop()
if (instance && instance.scope) {
// 返回一个函数，用以显式的结束侦听
remove(instance.scope.effects!, effect)
}
}