我們都知道監聽器的作用是在每次響應式狀態發生變化時觸發，在組合式API 中，我們可以使用watch()函數和watchEffect()函數,
當你改變了響應式狀態，它可能會同時觸發Vue 元件更新和偵聽器回調。
預設情況下，使用者建立的偵聽器回調，都會在 Vue 元件更新之前被呼叫。這表示你在偵聽器回呼中存取的 DOM 將是被 Vue 更新之前的狀態。
那麼，我們來看一下，怎麼才能好好的使用他們呢？他們之間又有什麼差別呢？
watch 需要偵聽特定的資料來源，例如偵聽一個ref，watch 的第一個參數可以是不同形式的「資料來源」：它可以是一個ref (包括計算屬性)、一個響應式物件、一個getter 函數、或多個資料來源組成的陣列，如下：
const x = ref(0)
const y = ref(0)
// 单个 ref
watch(x, (newX) => {
console.log(`x is ${newX}`)
})
// getter 函数
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${sum}`)
}
)
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})
const obj = reactive({ count: 0 })
//传入一个响应式对象
watch(obj, (newValue, oldValue) => {
// 在嵌套的属性变更时触发
// 注意：`newValue` 此处和 `oldValue` 是相等的
// 因为它们是同一个对象！
})
obj.count++
watch(
() => obj.count,
(newValue, oldValue) => {
// 注意：`newValue` 此处和 `oldValue` 是相等的
// *除非* obj.count 被整个替换了
},
{ deep: true }
)注意，你不能直接偵聽響應式物件的屬性值
const obj = reactive({ count: 0 })
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
console.log(`count is: ${count}`)
})這裡需要用一個傳回該屬性的getter 函數：
// 提供一个 getter 函数
watch(
() => obj.count,
(count) => {
console.log(`count is: ${count}`)
}
)watch 預設是懶執行的：只有當資料來源變更時，才會執行回呼。但在某些場景中，我們希望在建立偵聽器時，立即執行一遍回呼。舉例來說，我們想請求一些初始數據，然後在相關狀態更改時重新請求數據。
我們可以透過傳入immediate: true 選項來強制偵聽器的回呼立即執行：
watch(source, (newValue, oldValue) => {
// 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })#watchEffect( ) 允許我們自動追蹤回呼的響應式依賴。
const todoId = ref(1)
const data = ref(null)
watchEffect(async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json()
})這個例子中，回呼會立即執行，不需要指定 immediate: true。在執行期間，它會自動追蹤 todoId.value 作為依賴（和計算屬性類似）。每當 todoId.value 變化時，回呼會再次執行。有了 watchEffect()，我們不再需要明確傳遞 todoId 作為來源值。
watchEffect() 適合有多個依賴項的偵聽器對於這種只有一個依賴項的範例來說，好處相對較小。此外，如果你需要偵聽一個嵌套資料結構中的幾個屬性，watchEffect() 可能會比深度偵聽器更有效，因為它將只追蹤回呼中被使用到的屬性，而不是遞歸地追蹤所有的屬性。
如果想在偵聽器回呼中能存取被Vue 更新之後的DOM，你需要指明flush: ‘post’ 選項，
後置刷新的watchEffect()有個更方便的別名watchPostEffect()：
import { watchPostEffect } from 'vue'
watchPostEffect(() => {
/* 在 Vue 更新后执行 */
})watch 和watchEffect 都能響應式地執行有副作用的回調。它們之間的主要差異是追蹤響應式依賴的方式：
watch 只追蹤明確偵聽的資料來源。它不會追蹤任何在回調中訪問到的東西。另外，僅在資料來源確實改變時才會觸發回呼。 watch 會避免在發生副作用時追蹤依賴，因此，我們能更精確地控制回呼函數的觸發時機。
watchEffect，則會在副作用發生期間追蹤依賴。它會在同步執行過程中，自動追蹤所有能存取的響應式屬性。這更方便，而且程式碼往往更簡潔，但有時其響應性依賴關係會比較不明確。 適合有多個相依性的偵聽器
以上是vue3如何資料監聽watch/watchEffect的詳細內容。更多資訊請關注PHP中文網其他相關文章！
