Vue3은 watch를 사용하여 객체의 특정 속성을 수신합니다
1. 서문
<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()의 기본값은 lazy listening이며, 이는 listening 소스에서만 발생합니다. 함수는 변경이 있을 때만 실행됩니다
첫 번째 매개변수: 청취 소스는 다음 유형 중 하나일 수 있습니다.
값, ref, 반응형 객체(reactive)를 반환하거나 다음으로 구성되는 함수입니다. 위 유형의 값 배열 두 번째 매개변수: 청취 소스가 변경될 때 트리거되는 콜백 함수입니다.
(newValue, oldValue) => { /* code */}
여러 소스를 수신할 때 콜백 함수는 소스 배열의 새 값과 이전 값에 해당하는 두 개의 배열을 허용합니다.
( [ newValue1 , newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}
세 번째 매개변수: 이러한 옵션을 지원할 수 있는 선택적 개체
immediate: 리스너가 깊게 생성되면 콜백이 즉시 트리거됩니다. 소스는 딥 레벨이 플러시로 변경될 때 콜백 함수를 트리거하도록 깊이 탐색을 강제하는 객체입니다. 콜백 함수의 새로 고침 타이밍을 조정합니다. onTrack / onTrigger: 디버그 리스너 종속성
2 이유
보기 </ code>의 청취 소스는 위의 4가지 상황만 가능합니다<code>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}`)
}
)로그인 후 복사
3.watch源码分析
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
4.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标准化）
if (isRef(source)) {
getter = () => source.value
forceTrigger = isShallow(source)
}로그인 후 복사
if (isReactive(source)) {
getter = () => source
deep = true
}로그인 후 복사
例子
<template>
<div class="container">
<h3>obj---{{ obj }}</h3>
<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>로그인 후 복사
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)
}
})
}로그인 후 복사
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]
)
}
}
}로그인 후 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
