第一步

watch 这个方法并不在响应式模块中，他是运行时中的 api，但是它确实是通过响应式模块实现的

reactive.ts

...

export function isReactive(value) {
  return !!((value && value[ReactiveFlags.IS_REACTIVE]));
}

ref.ts

...

export function isRef(value) {
  return value && value.__v_isRef;
}

packages/reactivity/src/apiWatch.ts

import { ReactiveEffect } from './effect';
import { isFunction, isObject } from '@vue/shared';
import { isReactive } from './reactive';
import { isRef } from './ref';

export function watch(source, cb, options = {} as any) {
  // watchEffect 也是基于 doWatch 实现的
  return doWatch(source, cb, options);
}

function traverse(source, depth, currentDepth = 0, seen = new Set()) {
  if (!isObject(source)) {
    return source;
  }

  if (depth) {
    if (depth <= currentDepth) {
      return source;
    }
    currentDepth++;
  }

  if (seen.has(source)) {
    return source;
  }

  for (const key in source) {
    traverse(source[key], depth, currentDepth, seen);
  }

  return source;
}

function doWatch(source, cb, { deep, immediate }) {
  const reactiveGetter = (source) => traverse(source, deep === false ? 1 : undefined);

  // 产生一个可以给 reactiveEffect 来使用的 getter，需要对这个对象进行取值操作，会关联当前的reactiveEffect

  let getter;
  if (isReactive(source)) {
    getter = () => reactiveGetter(source);
  } else if (isRef(source)) {
    getter = () => source.value;
  } else if (isFunction(source)) {
    getter = source;
  }

  let oldValue;
  const job = () => {
    const newValue = effect.run();
    cb(newValue, oldValue);
    oldValue = newValue;
  };

  const effect = new ReactiveEffect(getter, job);

  if (cb) {
    if (immediate) {
      job();
    } else {
      oldValue = effect.run();
    }
  }
}