第一步

watchEffect 函数是当依赖的值变化后，自动指定该函数中的代码

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);
}

...

// -----------------------------新增开始-----------------------------
export function watchEffect(source, options = {} as any) {
  return doWatch(source, null, options);
}
// -----------------------------新增结束-----------------------------

function doWatch(source, cb, { deep, immediate }) {
  ...

  let oldValue;
  const job = () => {
    // -----------------------------新增开始-----------------------------
    if (cb) {
      const newValue = effect.run();
      cb(newValue, oldValue);
      oldValue = newValue;
    } else {
      effect.run();
    }
    // -----------------------------新增结束-----------------------------
  };

  const effect = new ReactiveEffect(getter, job);

  if (cb) {
    if (immediate) {
      job();
    } else {
      oldValue = effect.run();
    }
  } else {
    // -----------------------------新增开始-----------------------------
    effect.run();
    // -----------------------------新增结束-----------------------------
  }
}