Vue 3 的響應(yīng)式系統(tǒng)是其核心優(yōu)勢之一，而 watch 是處理響應(yīng)式數(shù)據(jù)變化的“瑞士軍刀”。相比于 watchEffect 的“自動追蹤”，watch 提供了更精確的控制力，允許你指定監(jiān)聽哪些數(shù)據(jù)，并區(qū)分“舊值”與“新值”。

這篇文章將帶你深入理解 Vue 3 中的 watch，涵蓋基礎(chǔ)用法、高級配置以及與 watchEffect 的對比。

?? 什么是 watch？

在 Vue 3 的組合式 API 中，watch 是一個(gè)用于觀察和響應(yīng)響應(yīng)式狀態(tài)變化的 API。它類似于 Vue 2 中的 watch 選項(xiàng)，但在組合式 API 中更加靈活和強(qiáng)大。

核心特點(diǎn)：

• 惰性執(zhí)行：watch 在創(chuàng)建時(shí)不會立即執(zhí)行回調(diào)，只有當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)才會執(zhí)行（除非配置 immediate: true）。
• 精準(zhǔn)控制：你可以明確指定監(jiān)聽哪個(gè)或哪些數(shù)據(jù)源。
• 獲取舊值：你可以很方便地獲取到變化前的舊值和變化后的新值。

?? 基礎(chǔ)用法

在使用 watch 之前，需要先從 Vue 中導(dǎo)入它：

import { watch } from 'vue'

1. 監(jiān)聽單個(gè)數(shù)據(jù)源 (Ref)

最常見的情況是監(jiān)聽一個(gè) ref。

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 監(jiān)聽 count
watch(count, (newVal, oldVal) => {
  console.log(`count 從 ${oldVal} 變成了 ${newVal}`)
})
// 點(diǎn)擊按鈕時(shí)觸發(fā)
const increment = () => {
  count.value++
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

2. 監(jiān)聽響應(yīng)式對象的屬性 (Getter 函數(shù))

如果你想監(jiān)聽 reactive 對象的某個(gè)屬性，或者監(jiān)聽一個(gè)計(jì)算屬性，你需要傳入一個(gè)getter 函數(shù)。

<script setup>
import { reactive, watch } from 'vue'
const state = reactive({
  name: 'Alice',
  age: 25
})
// 監(jiān)聽 state.name
watch(
  () => state.name, 
  (newName, oldName) => {
    console.log(`名字從 ${oldName} 改為 ${newName}`)
  }
)
</script>

注意： 這里的 () => state.name 是一個(gè)函數(shù)，watch 會執(zhí)行這個(gè)函數(shù)來獲取要監(jiān)聽的值。

?? 監(jiān)聽多個(gè)數(shù)據(jù)源

你可以通過傳入一個(gè)數(shù)組來同時(shí)監(jiān)聽多個(gè)源?；卣{(diào)函數(shù)接收的參數(shù)也將是一個(gè)數(shù)組，分別對應(yīng)新值和舊值。

<script setup>
import { ref, watch } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
watch(
  [firstName, lastName], 
  ([newFirst, newLast], [oldFirst, oldLast]) => {
    console.log(`${oldFirst} ${oldLast} -> ${newFirst} ${newLast}`)
  }
)
</script>

?? 深度監(jiān)聽與立即執(zhí)行

watch 接受第三個(gè)參數(shù)——一個(gè)配置選項(xiàng)對象。

1. 深度監(jiān)聽

默認(rèn)情況下，watch 是淺層的。這意味著如果你監(jiān)聽一個(gè)響應(yīng)式對象，直接修改其嵌套屬性可能不會觸發(fā)回調(diào)（取決于你監(jiān)聽的是整個(gè)對象還是特定屬性）。

使用 deep: true 可以強(qiáng)制深度遍歷，監(jiān)聽對象內(nèi)部所有層級的變化。

watch(
  () => state, // 監(jiān)聽整個(gè)對象
  (newState, oldState) => {
    // 即使是 state.profile.address 變了，這里也會觸發(fā)
  },
  { deep: true } 
)

2. 立即執(zhí)行

使用 immediate: true，回調(diào)函數(shù)會在創(chuàng)建監(jiān)聽器時(shí)立即執(zhí)行一次。

watch(
  () => searchQuery.value,
  (query) => {
    // 頁面加載時(shí)會立即執(zhí)行一次，無需等待 query 變化
    fetchResults(query) 
  },
  { immediate: true } 
)

?? 停止監(jiān)聽

watch 函數(shù)會返回一個(gè) stop 函數(shù)。調(diào)用這個(gè)函數(shù)可以停止監(jiān)聽，防止內(nèi)存泄漏或不必要的計(jì)算。

<script setup>
import { ref, watch } from 'vue'
const counter = ref(0)
const stopWatch = watch(counter, (newVal) => {
  if (newVal > 10) {
    console.log('超過10了，停止監(jiān)聽')
    stopWatch() // 停止監(jiān)聽
  }
})
</script>

?? watch 與 watchEffect 的區(qū)別

初學(xué)者?；煜?watch 和 watchEffect，它們的主要區(qū)別如下：

何時(shí)使用 watch？
當(dāng)你需要根據(jù)某個(gè)特定狀態(tài)的變化來執(zhí)行異步操作或開銷較大的操作時(shí)（例如：搜索建議、表單驗(yàn)證）。

?? 總結(jié)

watch 是 Vue 3 中處理響應(yīng)式數(shù)據(jù)變化邏輯的基石。通過掌握以下幾點(diǎn)，你可以更高效地編寫 Vue 應(yīng)用：

1. 監(jiān)聽 Ref：直接傳入 ref 變量。
2. 監(jiān)聽 Reactive 屬性：傳入 getter 函數(shù) () => obj.prop。
3. 配置項(xiàng)：善用 deep 和 immediate。
4. 清理副作用：記得在適當(dāng)?shù)臅r(shí)候調(diào)用 stop 函數(shù)。

希望這篇文章能幫助你更好地理解和使用 Vue 3 的 watch！

到此這篇關(guān)于深入理解 Vue 3 的 watch及用法示例小結(jié)的文章就介紹到這了,更多相關(guān)vue watch用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論