快捷導(dǎo)航

Vue數(shù)據(jù)監(jiān)聽(tīng)器watch和watchEffect的使用

更新時(shí)間：2023年02月23日 10:12:56 作者：泠泠在路上

今天我們來(lái)學(xué)習(xí)一下watch監(jiān)聽(tīng)器和它的好兄弟watchEffect監(jiān)聽(tīng)器。這個(gè)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，用的不是很多，當(dāng)然了，根據(jù)自己的項(xiàng)目情況自行決定使用，希望對(duì)大家有所幫助

watch()函數(shù)

watch 需要偵聽(tīng)特定的數(shù)據(jù)源，比如偵聽(tīng)一個(gè) ref，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è)來(lái)源組成的數(shù)組
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})
const obj = reactive({ count: 0 })
//傳入一個(gè)響應(yīng)式對(duì)象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的屬性變更時(shí)觸發(fā)
  // 注意：`newValue` 此處和 `oldValue` 是相等的
  // 因?yàn)樗鼈兪峭粋€(gè)對(duì)象！
})
obj.count++
watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 注意：`newValue` 此處和 `oldValue` 是相等的
    // *除非* obj.count 被整個(gè)替換了
  },
  { deep: true }
)

注意，你不能直接偵聽(tīng)響應(yīng)式對(duì)象的屬性值

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

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

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

watch 默認(rèn)是懶執(zhí)行的：僅當(dāng)數(shù)據(jù)源變化時(shí)，才會(huì)執(zhí)行回調(diào)。但在某些場(chǎng)景中，我們希望在創(chuàng)建監(jiān)聽(tīng)器時(shí)，立即執(zhí)行一遍回調(diào)。舉例來(lái)說(shuō)，我們想請(qǐng)求一些初始數(shù)據(jù)，然后在相關(guān)狀態(tài)更改時(shí)重新請(qǐng)求數(shù)據(jù)。

我們可以通過(guò)傳入 immediate: true 選項(xiàng)來(lái)強(qiáng)制監(jiān)聽(tīng)器的回調(diào)立即執(zhí)行：

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

watchEffect()函數(shù)

watchEffect() 允許我們自動(dòng)跟蹤回調(diào)的響應(yīng)式依賴。

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

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

watchEffect() 適合有多個(gè)依賴項(xiàng)的監(jiān)聽(tīng)器對(duì)于這種只有一個(gè)依賴項(xiàng)的例子來(lái)說(shuō)，好處相對(duì)較小。此外，如果你需要偵聽(tīng)一個(gè)嵌套數(shù)據(jù)結(jié)構(gòu)中的幾個(gè)屬性，watchEffect() 可能會(huì)比深度監(jiān)聽(tīng)器更有效，因?yàn)樗鼘⒅桓櫥卣{(diào)中被使用到的屬性，而不是遞歸地跟蹤所有的屬性。

如果想在監(jiān)聽(tīng)器回調(diào)中能訪問(wèn)被 Vue 更新之后的 DOM，你需要指明 flush: ‘post’ 選項(xiàng)，

后置刷新的 watchEffect() 有個(gè)更方便的別名 watchPostEffect()：

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

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

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

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

watchEffect，則會(huì)在副作用發(fā)生期間追蹤依賴。它會(huì)在同步執(zhí)行過(guò)程中，自動(dòng)追蹤所有能訪問(wèn)到的響應(yīng)式屬性。這更方便，而且代碼往往更簡(jiǎn)潔，但有時(shí)其響應(yīng)性依賴關(guān)系會(huì)不那么明確。適合有多個(gè)依賴項(xiàng)的監(jiān)聽(tīng)器

到此這篇關(guān)于Vue數(shù)據(jù)監(jiān)聽(tīng)器watch和watchEffect的使用的文章就介紹到這了,更多相關(guān)Vue watch與watchEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: