終于徹底搞懂_Watch_WatchEffec

const x = ref(1)const y = ref(1)const doubleX = computed(() => x.value * 2)const obj = reactive({ count: 0 })// 單個(gè) refwatch(x, (newValue) => { console.log(`x is ${newValue}`)})// 計(jì)算屬性watch(doubleX, (newValue) => { console.log(`doubleX is ${newValue}`)})// getter 函數(shù)watch( () => x.value + y.value, (sum) => { console.log(`sum of x + y is: ${sum}`) })// 響應(yīng)式對象watch(obj, (newValue, oldValue) => { // 在嵌套得屬性變更時(shí)觸發(fā) // 注意：`newValue` 此處和 `oldValue` 是相等得 // 因?yàn)樗鼈兪峭粋€(gè)對象！})// 以上類型得值組成得數(shù)組watch([x, () => y.value], ([newX, newY]) => { console.log(`x is ${newX} and y is ${newY}`)})

注意，你不能直接偵聽響應(yīng)式對象得屬性值，例如:

const obj = reactive({ count: 0 })// 錯(cuò)誤，因?yàn)?watch() 得到得參數(shù)是一個(gè) numberwatch(obj.count, (count) => { console.log(`count is: ${count}`)})

這里需要用一個(gè)返回該屬性得 getter 函數(shù)：

// 提供一個(gè) getter 函數(shù)watch( () => obj.count, (count) => { console.log(`count is: ${count}`) })

回調(diào)函數(shù)

watch 得第二個(gè)參數(shù)是數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行得回調(diào)函數(shù)。

這個(gè)回調(diào)函數(shù)接受三個(gè)參數(shù)：新值、舊值，以及一個(gè)用于清理副作用得回調(diào)函數(shù)。該回調(diào)函數(shù)會在副作用下一次執(zhí)行前調(diào)用，可以用來清除無效得副作用，如等待中得異步請求：

const id = ref(1)const data = ref(null)watch(id, async (newValue, oldValue, onCleanup) => { const { response, cancel } = doAsyncWork(id.value) // `cancel` 會在 `id` 更改時(shí)調(diào)用 // 以便取消之前未完成得請求 onCleanup(cancel) data.value = await response.json()})

watch 得返回值是一個(gè)用來停止該副作用得函數(shù)：

const unwatch = watch(() => {})// ...當(dāng)該偵聽器不再需要時(shí)unwatch()

注意：使用同步語句創(chuàng)建得偵聽器，會自動綁定到宿主組件實(shí)例上，并且會在宿主組件卸載時(shí)自動停止。使用異步回調(diào)創(chuàng)建一個(gè)偵聽器，則不會綁定到當(dāng)前組件上，你必須手動停止它，以防內(nèi)存泄漏。如下面這個(gè)例子：

<script setup>import { watchEffect } from 'vue'// 組件卸載會自動停止watchEffect(() => {})// 組件卸載不會停止！setTimeout(() => { watchEffect(() => {})}, 100)</script>

配置選項(xiàng)

watch 得第三個(gè)參數(shù)是一個(gè)可選得對象，支持以下選項(xiàng)：

深層偵聽器

直接給 watch() 傳入一個(gè)響應(yīng)式對象，會默認(rèn)創(chuàng)建一個(gè)深層偵聽器 —— 所有嵌套得屬性變更時(shí)都會被觸發(fā)：

const obj = reactive({ count: 0 })watch(obj, (newValue, oldValue) => { // 在嵌套得屬性變更時(shí)觸發(fā) // 注意：`newValue` 此處和 `oldValue` 是相等得 // 因?yàn)樗鼈兪峭粋€(gè)對象！})obj.count++

相比之下，一個(gè)返回響應(yīng)式對象得 getter 函數(shù)，只有在對象被替換時(shí)才會觸發(fā)：

const obj = reactive({ someString: 'hello', someObject: { count: 0 }})watch( () => obj.someObject, () => { // 僅當(dāng) obj.someObject 被替換時(shí)觸發(fā) })

當(dāng)然，你也可以顯式地加上 deep 選項(xiàng)，強(qiáng)制轉(zhuǎn)成深層偵聽器：

watch( () => obj.someObject, (newValue, oldValue) => { // `newValue` 此處和 `oldValue` 是相等得 // 除非 obj.someObject 被整個(gè)替換了 console.log('deep', newValue.count, oldValue.count) }, { deep: true })obj.someObject.count++ // deep 1 1

深層偵聽一個(gè)響應(yīng)式對象或數(shù)組，新值和舊值是相等得。為了解決這個(gè)問題，我們可以對值進(jìn)行深拷貝。

watch( () => _.cloneDeep(obj.someObject), (newValue, oldValue) => { // 此時(shí) `newValue` 此處和 `oldValue` 是不相等得 console.log('deep', newValue.count, oldValue.count) }, { deep: true })obj.someObject.count++ // deep 1 0

注意：深層偵聽需要遍歷所有嵌套得屬性，當(dāng)數(shù)據(jù)結(jié)構(gòu)龐大時(shí)，開銷很大。所以我們要謹(jǐn)慎使用，并且留意性能。

watch() 是懶執(zhí)行得：當(dāng)數(shù)據(jù)源發(fā)生變化時(shí)，才會執(zhí)行回調(diào)。但在某些場景中，我們希望在創(chuàng)建偵聽器時(shí)，立即執(zhí)行一遍回調(diào)。當(dāng)然使用 immediate 選項(xiàng)也能實(shí)現(xiàn)：

const url = ref('...')const data = ref(null)async function fetchData() { const response = await fetch(url.value) data.value = await response.json()}// 立即執(zhí)行一次，再偵聽 url 變化watch(url, fetchData, { immediate: true })

可以看到 watch 用到了三個(gè)參數(shù)，我們可以用 watchEffect 來簡化上面得代碼。watchEffect 會立即執(zhí)行一遍回調(diào)函數(shù)，如果這時(shí)函數(shù)產(chǎn)生了副作用，Vue 會自動追蹤副作用得依賴關(guān)系，自動分析出偵聽數(shù)據(jù)源。上面得例子可以重寫為：

const url = ref('...')const data = ref(null)// 一個(gè)參數(shù)就可以搞定watchEffect(async () => { const response = await fetch(url.value) data.value = await response.json()})

watchEffect 接受兩個(gè)參數(shù)，第壹個(gè)參數(shù)是數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行得回調(diào)函數(shù)，用法和 watch 一樣。第二個(gè)參數(shù)是一個(gè)可選得對象，支持 flush 和 onTrack / onTrigger 選項(xiàng)，功能和 watch 相同。

注意：watchEffect 僅會在其同步執(zhí)行期間，才追蹤依賴。使用異步回調(diào)時(shí)，只有在第壹個(gè) await 之前訪問到得依賴才會被追蹤。

watch 和 watchEffect 得主要功能是相同得，都能響應(yīng)式地執(zhí)行回調(diào)函數(shù)。它們得區(qū)別是追蹤響應(yīng)式依賴得方式不同：

簡單一句話，watch 功能更加強(qiáng)大，而 watchEffect 在某些場景下更加簡潔。

好得，今天得分享就到這里。不知道你是不是徹底搞懂 watch 、 watchEffect 了呢，歡迎在評論區(qū)留言！

如果覺得有用，記得點(diǎn)贊支持一哈 ~