<script lang="ts" setup>
// 接受父组件传递的数据
const props = defineProps({
test: {
type: String,
default: ''
}
})
// 使用 watch 侦听 props 中的 test 属性
watch(
// 这种写法不会侦听到 props 中 test 的变化
props.test,
() => {
console.log("侦听成功")
}
)
watch(
// 这种写法会侦听到 props 中 test 的变化
() => props.test,
() => {
console.log("侦听成功")
}
)
</script>
watch 的基本用法
watch() 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数
第一个参数:侦听源,侦听源可以是一下几种
- 一个函数,返回一个值
- 一个 ref
- 一个响应式对象(reactive)
- 或是由以上类型的值组成的数组
第二个参数:侦听源发生变化时要触发的回调函数。
(newValue, oldValue) => { /* code */}
当侦听多个来源时,回调函数接受两个数组,分别对应源数组中的新值和旧值
( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}
第三个参数:可选对象,可以支持一下这些选项
- immediate:侦听器创建时立即触发回调
- deep:如果源是一个对象,会强制深度遍历,以便在深层级发生变化时触发回调函数
- flush:调整回调函数的刷新时机
- onTrack / onTrigger:调试侦听器的依赖
因为watch
的侦听源只能是上面的4中情况
const obj = reactive({ count: 0 })
// 错误,因为 watch() 中的侦听源是一个 number,最终 source 返回的 getter 函数是一个空,所以就得不到侦听的数据
watch(obj.count, (count) => {
console.log(`count is: ${count}`)
})
// 正确,主要思想是,将侦听源转化为以上4种类型(转化为getter函数是最简单方便的)
watch(
() => obj.count,
(count) => {
console.log(`count is: ${count}`)
}
)
export function watch<T = any, Immediate extends Readonly<boolean> = false>(
source: T | WatchSource<T>,
cb: any,
options?: WatchOptions<Immediate>
): WatchStopHandle {
if (__DEV__ && !isFunction(cb)) {
warn(
`\`watch(fn, options?)\` signature has been moved to a separate API. ` +
`Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
`supports \`watch(source, cb, options?) signature.`
)
}
return doWatch(source as any, cb, options)
}
从源码中可以看出,watch
接收三个参数:source
侦听源、cb
回调函数、options
侦听配置,最后会返回一个doWatch
function doWatch(
source: WatchSource | WatchSource[] | WatchEffect | object,
cb: WatchCallback | null,
{ immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
// ...
// 当前组件实例
const instance = currentInstance
// 副作用函数,在初始化effect时使用
let getter: () => any
// 强制触发侦听
let forceTrigger = false
// 是否为多数据源。
let isMultiSource = false
}
doWatch
依然接受三个参数:source
侦听源、cb
回调函数、options
侦听配置
这里着重对侦听源的源码进行分析(source标准化)
source
是ref
类型,getter
是个返回source.value
的函数,forceTrigger
取决于source
是否是浅层响应式。if (isRef(source)) {
getter = () => source.value
forceTrigger = isShallow(source)
}
source
是reactive
类型,getter
是个返回source
的函数,并将deep
设置为true
。 当直接侦听一个响应式对象时,侦听器会自动启用深层模式if (isReactive(source)) {
getter = () => source
deep = true
}
例子
<template>
<div class="container">
<h2>obj---{{ obj }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
</div>
</template>
<script lang="ts" setup>
import { reactive, watch } from "vue";
const obj = reactive({
name: "张三",
age: 18,
});
const changeName = () => {
obj.name += "++";
};
const changeAge = () => {
obj.age += 1;
};
// obj 中的任一属性变化了,都会被监听到
watch(obj, () => {
console.log("变化了");
});
</script>
source
是个数组,将isMultiSource
设为true
,forceTrigger
取决于source
是否有reactive
类型的数据,getter
函数中会遍历source
,针对不同类型的source
做不同处理。if (isArray(source)) {
isMultiSource = true
forceTrigger = source.some(isReactive)
getter = () =>
source.map(s => {
if (isRef(s)) {
return s.value
} else if (isReactive(s)) {
return traverse(s)
} else if (isFunction(s)) {
return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
} else {
__DEV__ && warnInvalidSource(s)
}
})
}
source
是个function
。存在cb
的情况下,getter
函数中会执行source
,这里source
会通过callWithErrorHandling
函数执行,在callWithErrorHandling
中会处理source
执行过程中出现的错误;不存在cb
的话,在getter
中,如果组件已经被卸载了,直接return
,否则判断cleanup
(cleanup
是在watchEffect
中通过onCleanup
注册的清理函数),如果存在cleanup
执行cleanup
,接着执行source
,并返回执行结果。source
会被callWithAsyncErrorHandling
包装,该函数作用会处理source
执行过程中出现的错误,与callWithErrorHandling
不同的是,callWithAsyncErrorHandling
会处理异步错误。if (isFunction(source)) {
if (cb) {
getter = () =>
callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
} else {
// watchEffect
getter = () => {
// 如果组件实例已经卸载,直接return
if (instance && instance.isUnmounted) {
return
}
// 如果清理函数,则执行清理函数
if (cleanup) {
cleanup()
}
// 执行source,传入onCleanup,用来注册清理函数
return callWithAsyncErrorHandling(
source,
instance,
ErrorCodes.WATCH_CALLBACK,
[onCleanup]
)
}
}
}
getter
会被赋值为一个空函数getter = NOOP
__DEV__ && warnInvalidSource(source)
其实,source
标准化主要是根据source
的类型,将其变成 getter 函数
source
是ref
对象,则创建一个访问 source.value
的getter
函数source
是一个reactive
对象,则创建一个访问source
的getter
函数,并将deep
设置为true
source
是一个函数,则会进一步进行判断第二个参数cb
是否存在。最后的getter
就是一个简单的对source
封装的函数source
是一个数组,则会对数组中的每个元素进行判断并且返回相应的getter
函数。最后返回一个各种getter
函数封装成的一个数组整个doWatch
方法中的逻辑主要分为一下几步:
getter
函数来获取数据源的值job
方法来调用传入watch
中的cb
job
中通过调用runner
,runner
调用getter
获取数据源新值doWatch
中闭包缓存了数据源的旧值cb
job
作为activeEffect
的scheduler
方法,在后续的数据修改导致的trigger
中调用immediate
调用job
,未传入调用runner
,以数据源为被观察者收集依赖实现响应式侦听的第一步就是需要通过正确的getter
函数去获取侦听源的值,所以在使用watch
侦听数据时,务必保证侦听源的类型是符合官方规定的类型的