<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">
<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>#如果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)
以上是Vue3中怎麼使用watch監聽物件的屬性值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
