vue3的watch监听

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

类型

先来看看类型

单个来源

// 侦听单个来源
type StopHandle = () => void // 整个函数的类型是void

// 监听对象的类型
type WatchSource<T> = 
    | Ref<T> // 一个ref
    | (() => T) // getter 一个函数，返回一个值
    | T extends object // 对象
    ? T
    : never // 响应式对象

// 监听回调函数传参以及返回类型
type WatchCallback<T> = (
    value: T,
    oldValue: T,
    onCleanup: (cleanupFn: () => void) => void
) => void

interface WatchEffectOptions {
    flush?: 'pre' | 'post' | 'sync' // 默认'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
}

// 其他选项对象
interface WatchOptions extends WatchEffectOptions {
    immediate?: boolean // 默认false
    deep?: boolean // 默认false
    
    flush?: 'pre' | 'post' | 'sync' // 默认'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
}

function watch<T>(
    source: WatchSource<T>,
    callback: WatchCallback<T>,
    options?: WatchOptions
): StopHandle

多个来源

function watch<T>(
    source: WatchSource<T>[],
    callback: WatchCallback<T[]>,
    options?: WatchOptions
): StopHandle

懒监听

只有在数据源发生变化时才执行回调函数。

第一个参数

监听的源

分为:

（监听一个源的时候）

一个ref
一个函数，返回一个值
一个响应式对象
由以上类型的值组成的数组（监听多个值的时候）

注意 : watch source只能是getter/effect函数、ref、响应式对象或这些类型的数组。

第二个参数

单个来源

发生变化时要调用的回调函数。

参数: 新值、旧值、用于注册副作用清理的回调函数

用于注册副作用清理的回调函数: 在副作用下一次重新执行前调用,可以用来清除无效的副作用。eg等待中的异步请求。

第三个参数：用于注册副作用清理的回调函数

callback (fn) => {
    cleanup = effect2.onStop = () => {
      callWithErrorHandling(fn, instance, 4);
    };
}

多个来源

当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

比如

const a = ref(true)
const b = ref('')

a.value = !a.value;
b.value = 'bbb';

watch(() => [a.value, b.value], (newValue, oldvalue) => {
    console.log(newValue[0], newValue[1]) // false 'bbb'
    console.log(oldvalue[0], oldvalue[1]) // true ''
})