vue3如何進行資料監聽watch/watchEffect

roc_guo發表於2023-03-26

我們都知道監聽器的作用是在每次響應式狀態發生變化時觸發,在組合式 API 中,我們可以使用 watch()函式和watchEffect()函式,

當你更改了響應式狀態,它可能會同時觸發 Vue 元件更新和偵聽器回撥。

預設情況下,使用者建立的偵聽器回撥,都會在 Vue 元件更新之前被呼叫。這意味著你在偵聽器回撥中訪問的 DOM 將是被 Vue 更新之前的狀態。

那麼,我們來看一下,怎麼才能好好的使用他們呢?他們之間又有什麼區別呢?

watch()函式

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()函式

watchEffect() 允許我們自動跟蹤回撥的響應式依賴。

const todoId = ref(1)
const data = ref(null)
 
watchEffect(async () => {
  const response = await fetch(
    `{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 和 watchEffect 都能響應式地執行有副作用的回撥。它們之間的主要區別是追蹤響應式依賴的方式:

watch 只追蹤明確偵聽的資料來源。它不會追蹤任何在回撥中訪問到的東西。另外,僅在資料來源確實改變時才會觸發回撥。watch 會避免在發生副作用時追蹤依賴,因此,我們能控制回撥函式的觸發時機。

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901823/viewspace-2941733/,如需轉載,請註明出處,否則將追究法律責任。

相關文章