目錄

• watch()函數(shù)
• watchEffect()函數(shù)
• watch 與 watchEffect之間的聯(lián)系與區(qū)別

我們都知道監(jiān)聽器的作用是在每次響應式狀態(tài)發(fā)生變化時觸發(fā)，在組合式 API 中，我們可以使用 watch()函數(shù)和watchEffect()函數(shù),

當你更改了響應式狀態(tài)，它可能會同時觸發(fā) Vue 組件更新和偵聽器回調。

默認情況下，用戶創(chuàng)建的偵聽器回調，都會在 Vue 組件更新之前被調用。這意味著你在偵聽器回調中訪問的 DOM 將是被 Vue 更新之前的狀態(tài)。

那么，我們來看一下，怎么才能好好的使用他們呢？他們之間又有什么區(qū)別呢？

watch()函數(shù)

watch 需要偵聽特定的數(shù)據(jù)源，比如偵聽一個 ref，watch 的第一個參數(shù)可以是不同形式的“數(shù)據(jù)源”：它可以是一個 ref (包括計算屬性)、一個響應式對象、一個 getter 函數(shù)、或多個數(shù)據(jù)源組成的數(shù)組，如下：

const x = ref(0)
const y = ref(0)

// 單個 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}`)
  }
)



// 多個來源組成的數(shù)組
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})


const obj = reactive({ count: 0 })
//傳入一個響應式對象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的屬性變更時觸發(fā)
  // 注意：`newValue` 此處和 `oldValue` 是相等的
  // 因為它們是同一個對象！
})

obj.count++


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

注意，你不能直接偵聽響應式對象的屬性值

const obj = reactive({ count: 0 })

// 錯誤，因為 watch() 得到的參數(shù)是一個 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

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

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

watch 默認是懶執(zhí)行的：僅當數(shù)據(jù)源變化時，才會執(zhí)行回調。但在某些場景中，我們希望在創(chuàng)建偵聽器時，立即執(zhí)行一遍回調。舉例來說，我們想請求一些初始數(shù)據(jù)，然后在相關狀態(tài)更改時重新請求數(shù)據(jù)。

我們可以通過傳入 immediate: true 選項來強制偵聽器的回調立即執(zhí)行：

watch(source, (newValue, oldValue) => {
  // 立即執(zhí)行，且當 `source` 改變時再次執(zhí)行
}, { immediate: true })

watchEffect()函數(shù)

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()
})

這個例子中，回調會立即執(zhí)行，不需要指定 immediate: true。在執(zhí)行期間，它會自動追蹤 todoId.value 作為依賴（和計算屬性類似）。每當 todoId.value 變化時，回調會再次執(zhí)行。有了 watchEffect()，我們不再需要明確傳遞 todoId 作為源值。

watchEffect() 適合有多個依賴項的偵聽器對于這種只有一個依賴項的例子來說，好處相對較小。此外，如果你需要偵聽一個嵌套數(shù)據(jù)結構中的幾個屬性，watchEffect() 可能會比深度偵聽器更有效，因為它將只跟蹤回調中被使用到的屬性，而不是遞歸地跟蹤所有的屬性。

如果想在偵聽器回調中能訪問被 Vue 更新之后的 DOM，你需要指明 flush: ‘post’ 選項，
后置刷新的 watchEffect() 有個更方便的別名 watchPostEffect()：

import { watchPostEffect } from "vue"

watchPostEffect(() => {
  /* 在 Vue 更新后執(zhí)行 */
})

watch 與 watchEffect之間的聯(lián)系與區(qū)別

watch 和 watchEffect 都能響應式地執(zhí)行有副作用的回調。它們之間的主要區(qū)別是追蹤響應式依賴的方式：

watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調中訪問到的東西。另外，僅在數(shù)據(jù)源確實改變時才會觸發(fā)回調。watch 會避免在發(fā)生副作用時追蹤依賴，因此，我們能更加精確地控制回調函數(shù)的觸發(fā)時機。

watchEffect，則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中，自動追蹤所有能訪問到的響應式屬性。這更方便，而且代碼往往更簡潔，但有時其響應性依賴關系會不那么明確。適合有多個依賴項的偵聽器

到此這篇關于vue3如何進行數(shù)據(jù)監(jiān)聽watch/watchEffect的文章就介紹到這了,更多相關vue3數(shù)據(jù)監(jiān)聽watch/watchEffect內容請搜索以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持！