1const x = ref(0)
2const y = ref(0)
3
4// Single ref
5watch(x, (newX) => {
6  console.log(`x is ${newX}`)
7})
8
9// Getter function
10watch(
11  () => x.value + y.value,
12  (sum) => {
13    console.log(`sum of x + y is: ${sum}`)
14  }
15)
16
17// Array of multiple sources
18watch([x, () => y.value], ([newX, newY]) => {
19  console.log(`x is ${newX} and y is ${newY}`)
20})

1// implementation
2export function watch<T = any, Immediate extends Readonly<boolean> = false>(
3  source: T | WatchSource<T>,
4  cb: any,
5  options?: WatchOptions<Immediate>,
6): WatchStopHandle {
7  /// ...
8  return doWatch(source as any, cb, options)
9}

1function doWatch(
2  source: WatchSource | WatchSource[] | WatchEffect | object,
3  cb: WatchCallback | null,
4  {
5    immediate,
6    deep,
7    flush,
8    once,
9    onTrack,
10    onTrigger,
11  }: WatchOptions = EMPTY_OBJ,
12): WatchStopHandle {
13  /// ...
14
15  let getter: () => any
16  let forceTrigger = false
17  let isMultiSource = false
18
19  if (isRef(source)) {
20    getter = () => source.value
21    forceTrigger = isShallow(source)
22  } else if (isReactive(source)) {
23    getter = () => reactiveGetter(source)
24    forceTrigger = true
25  } else if (isArray(source)) {
26    /// ...
27  } else if (isFunction(source)) {
28    /// ...
29  } else {
30    getter = NOOP
31    __DEV__ && warnInvalidSource(source)
32  }
33
34  /// ...
35}

1function doWatch(
2  source: WatchSource | WatchSource[] | WatchEffect | object,
3  cb: WatchCallback | null,
4  {
5    immediate,
6    deep,
7    flush,
8    once,
9    onTrack,
10    onTrigger,
11  }: WatchOptions = EMPTY_OBJ,
12): WatchStopHandle {
13  /// ...
14
15  const job: SchedulerJob = () => {
16    if (!effect.active || !effect.dirty) {
17      return
18    }
19    if (cb) {
20      // watch(source, cb)
21      const newValue = effect.run()
22      if (
23        deep ||
24        forceTrigger ||
25        (isMultiSource
26          ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
27          : hasChanged(newValue, oldValue)) ||
28        (__COMPAT__ &&
29          isArray(newValue) &&
30          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
31      ) {
32        // cleanup before running cb again
33        if (cleanup) {
34          cleanup()
35        }
36        callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
37          newValue,
38          // pass undefined as the old value when it's changed for the first time
39          oldValue === INITIAL_WATCHER_VALUE
40            ? undefined
41            : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
42              ? []
43              : oldValue,
44          onCleanup,
45        ])
46        oldValue = newValue
47      }
48    } else {
49      // watchEffect
50      effect.run()
51    }
52  }
53
54  /// ...
55}

1function doWatch(
2  source: WatchSource | WatchSource[] | WatchEffect | object,
3  cb: WatchCallback | null,
4  {
5    immediate,
6    deep,
7    flush,
8    once,
9    onTrack,
10    onTrigger,
11  }: WatchOptions = EMPTY_OBJ,
12): WatchStopHandle {
13  /// ...
14
15  let scheduler: EffectScheduler
16  if (flush === 'sync') {
17    scheduler = job as any // the scheduler function gets called directly
18  } else if (flush === 'post') {
19    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
20  } else {
21    // default: 'pre'
22    job.pre = true
23    if (instance) job.id = instance.uid
24    scheduler = () => queueJob(job)
25  }
26
27  const effect = new ReactiveEffect(getter, NOOP, scheduler)
28
29  const scope = getCurrentScope()
30  const unwatch = () => {
31    effect.stop()
32    if (scope) {
33      remove(scope.effects, effect)
34    }
35  }
36
37  if (__DEV__) {
38    effect.onTrack = onTrack
39    effect.onTrigger = onTrigger
40  }
41
42  // initial run
43  if (cb) {
44    if (immediate) {
45      job()
46    } else {
47      oldValue = effect.run()
48    }
49  } else if (flush === 'post') {
50    queuePostRenderEffect(
51      effect.run.bind(effect),
52      instance && instance.suspense,
53    )
54  } else {
55    effect.run()
56  }
57
58  if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
59  return unwatch
60}

1const count = ref(0)
2
3watchEffect(() => console.log(count.value))
4// 0
5
6count.value++
7// 1

1export type WatchEffect = (onCleanup: OnCleanup) => void
2
3// Simple effect.
4export function watchEffect(
5  effect: WatchEffect,
6  options?: WatchOptionsBase,
7): WatchStopHandle {
8  return doWatch(effect, null, options)
9}

1/// ...
2
3const effect = new ReactiveEffect(getter, NOOP, scheduler)
4
5/// ...
6
7// initial run
8if (cb) {
9  if (immediate) {
10    job()
11  } else {
12    oldValue = effect.run()
13  }
14} else if (flush === 'post') {
15  queuePostRenderEffect(
16    effect.run.bind(effect),
17    instance && instance.suspense,
18  )
19} else {
20  effect.run()
21}
22
23/// ...

1import { ref, watch } from 'vue';
2
3const count = ref(0);
4
5watch(count, (newValue, oldValue) => {
6  console.log(`count changed from ${oldValue} to ${newValue}`);
7});

1import { ref, watchEffect } from 'vue';
2
3const count = ref(0);
4
5watchEffect(() => {
6  console.log(`count is now ${count.value}`);
7});