p"/> p">
<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中文網其他相關文章!