1.偵聽數(shù)據(jù)源類型

watch?的第一個(gè)參數(shù)可以是不同形式的“數(shù)據(jù)源”：它可以是一個(gè) ref (包括計(jì)算屬性)、一個(gè)響應(yīng)式對(duì)象、一個(gè)?getter 函數(shù)、或多個(gè)數(shù)據(jù)源組成的數(shù)組

const x = ref(0)
const y = ref(0)// 單個(gè) ref
watch(x, (newX) => {console.log(`x is ${newX}`)
})// getter 函數(shù)
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 多個(gè)來源組成的數(shù)組
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

2. 在監(jiān)聽響應(yīng)式對(duì)象里的值時(shí),需要提供一個(gè)getter函數(shù)

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

3. 深度監(jiān)聽和立即執(zhí)行

watch(() => state.someObject,(newValue, oldValue) => {// 注意：`newValue` 此處和 `oldValue` 是相等的// *除非* state.someObject 被整個(gè)替換了},{ deep: true },
{ immediate: true }
)

4. 一次性偵聽器

watch(source,(newValue, oldValue) => {// 當(dāng) `source` 變化時(shí)，僅觸發(fā)一次},{ once: true }
)

5.?watchEffect()

(1)watch只監(jiān)聽明確了的數(shù)據(jù)源,只有在數(shù)據(jù)源變化時(shí)觸發(fā)

(2)watchEffect可以監(jiān)聽所有能訪問到的響應(yīng)式屬性

1.使用watch
const todoId = ref(1)
const data = ref(null)watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)2.使用watchEffect
watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})這里就會(huì)自動(dòng)追蹤 todoId.value 作為依賴,每當(dāng) todoId.value 變化時(shí)，回調(diào)會(huì)再次執(zhí)行

6. 如果在監(jiān)聽一個(gè)id值時(shí),會(huì)執(zhí)行異步請(qǐng)求,但是如果在請(qǐng)求完成之前?id?發(fā)生了變化怎么辦

可以使用onWatcherCleanup()?API 來注冊一個(gè)清理函數(shù),重新調(diào)用

但是onWatcherCleanup()?只能在同步執(zhí)行期間調(diào)用

import { watch, onWatcherCleanup } from 'vue'watch(id, (newId) => {const controller = new AbortController()fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {// 回調(diào)邏輯})onWatcherCleanup(() => {// 終止過期請(qǐng)求controller.abort()})
})

如果需要在異步時(shí)調(diào)用,可以使用onCleanup

onCleanup?函數(shù)還作為第三個(gè)參數(shù)傳遞給偵聽器回調(diào)，以及?watchEffect?作用函數(shù)的第一個(gè)參數(shù)

watch(id, (newId, oldId, onCleanup) => {// ...onCleanup(() => {// 清理邏輯})
})watchEffect((onCleanup) => {// ...onCleanup(() => {// 清理邏輯})
})

7.回調(diào)的觸發(fā)時(shí)機(jī)

正常watch會(huì)在dom更新之前調(diào)用,但是如果當(dāng)需要根據(jù)數(shù)據(jù)的變化來執(zhí)行一些依賴于最新DOM狀態(tài)的操作時(shí),就需要在DOM更新之后調(diào)用,就可以使用flush: 'post'

watch(source, callback, {flush: 'post'
})watchEffect(callback, {flush: 'post'
})----------------------------------watchEffect添加flush: 'post'還可以使用下面的寫法:
import { watchPostEffect } from 'vue'watchPostEffect(() => {/* 在 Vue 更新后執(zhí)行 */
})

8.偵聽器一般同步使用,特殊情況會(huì)異步使用,而在異步使用時(shí),需要手動(dòng)的停止偵聽器.

<script setup>
import { watchEffect } from 'vue'// 它會(huì)自動(dòng)停止
watchEffect(() => {})// ...這個(gè)則不會(huì)！
setTimeout(() => {watchEffect(() => {})
}, 100)const unwatch = watchEffect(() => {})// ...當(dāng)該偵聽器不再需要時(shí)
unwatch()
</script>