引言

在 Vue 3 的組合式 API（Composition API）中，watch 是一個(gè)非常核心且強(qiáng)大的工具，用于監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)的變化并執(zhí)行相應(yīng)的副作用操作。本文將結(jié)合實(shí)際代碼示例，深入講解 watch 的使用方法、參數(shù)配置（如 deep、immediate）、常見(jiàn)寫法及其應(yīng)用場(chǎng)景。

一、watch 基本用法

Vue 3 中的 watch 函數(shù)用于監(jiān)聽(tīng)響應(yīng)式引用（ref）、響應(yīng)式對(duì)象（reactive）或計(jì)算屬性（computed）的變化。其基本語(yǔ)法如下：

import { watch } from 'vue'
 
watch(source, callback, options?)

• source：要監(jiān)聽(tīng)的數(shù)據(jù)源，可以是 ref、reactive 對(duì)象、getter 函數(shù)，或由多個(gè)上述組成的數(shù)組。
• callback：當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)的回調(diào)函數(shù)，接收新值和舊值作為參數(shù)。
• options（可選）：配置選項(xiàng)，如 { deep: true, immediate: true }。

二、常見(jiàn)寫法與示例分析

1. 監(jiān)聽(tīng) ref 或 reactive 對(duì)象

const count = ref(0)
 
watch(count, (newVal, oldVal) => {
  console.log(`count 從 ${oldVal} 變?yōu)?${newVal}`)
})

對(duì)于 reactive 對(duì)象，若只監(jiān)聽(tīng)整個(gè)對(duì)象（而非深層屬性），默認(rèn)不會(huì)觸發(fā)深層監(jiān)聽(tīng)：

const user = reactive({ name: 'Alice', age: 25 })
 
// ? 這樣不會(huì)監(jiān)聽(tīng)到 user.name 的變化！
watch(user, (newVal, oldVal) => {
  // 不會(huì)觸發(fā)
})

此時(shí)需要開(kāi)啟 deep: true（見(jiàn)下文）。

2. 使用 getter 函數(shù)監(jiān)聽(tīng)特定屬性（推薦方式）

這是最靈活、最常用的方式，尤其適用于監(jiān)聽(tīng) props、route 等非直接 ref 的數(shù)據(jù)。

示例 1：監(jiān)聽(tīng) props 中的復(fù)雜對(duì)象（如數(shù)組）

watch(
  () => props.fileList,
  (newFiles, oldFiles) => handleFiles(newFiles, oldFiles),
  { deep: true }
)

• () => props.fileList：返回一個(gè) getter 函數(shù)，確保能正確追蹤依賴。
• deep: true：因?yàn)?fileList 很可能是數(shù)組或?qū)ο?，?nèi)部元素變化不會(huì)觸發(fā)淺層監(jiān)聽(tīng)，必須開(kāi)啟深度監(jiān)聽(tīng)。
• 回調(diào)函數(shù)接收新舊值，便于做差異處理（如上傳文件列表變更）。

注意：如果 fileList 是一個(gè)數(shù)組，即使你 push 一個(gè)新文件，淺層監(jiān)聽(tīng)也不會(huì)觸發(fā)，因?yàn)閿?shù)組引用未變。deep: true 能解決這個(gè)問(wèn)題。

示例 2：監(jiān)聽(tīng)路由路徑變化

watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

• route 來(lái)自 vue-router 的 useRoute()，是一個(gè)響應(yīng)式對(duì)象。
• 監(jiān)聽(tīng) route.path 可以在用戶切換頁(yè)面時(shí)自動(dòng)更新高亮菜單項(xiàng)。
• 此處無(wú)需 deep，因?yàn)?path 是字符串（原始值），變化即觸發(fā)。

三、關(guān)鍵配置選項(xiàng)詳解

1.deep: true—— 深度監(jiān)聽(tīng)

• 作用：監(jiān)聽(tīng)對(duì)象或數(shù)組內(nèi)部屬性的變化。
• 適用場(chǎng)景：監(jiān)聽(tīng)嵌套對(duì)象、數(shù)組、props 中的復(fù)雜結(jié)構(gòu)。
• 注意：性能開(kāi)銷較大，僅在必要時(shí)使用。

const form = reactive({
  user: { name: '', email: '' }
})
 
watch(form, (newVal) => {
  // 默認(rèn)不觸發(fā)
}, { deep: true }) // 開(kāi)啟后，user.name 變化也會(huì)觸發(fā)

對(duì)于 ref 包裹的對(duì)象，watch(refObj, ..., { deep: true }) 也能深度監(jiān)聽(tīng)。

2.immediate: true—— 立即執(zhí)行

• 作用：在偵 聽(tīng)器創(chuàng)建時(shí)立即執(zhí)行一次回調(diào)。
• 適用場(chǎng)景：初始化時(shí)就需要根據(jù)當(dāng)前值執(zhí)行邏輯（如根據(jù)路由加載數(shù)據(jù)）。

watch(
  () => route.query.id,
  (id) => {
    if (id) fetchDetail(id)
  },
  { immediate: true }
)

如果不加 immediate: true，首次進(jìn)入頁(yè)面時(shí) id 存在但不會(huì)觸發(fā) fetchDetail。

3. 同時(shí)監(jiān)聽(tīng)多個(gè)源

watch([refA, refB], ([newA, newB], [oldA, oldB]) => {
  console.log('A or B changed')
})

四、watch vs watchEffect

通常建議優(yōu)先使用 watch，因?yàn)樗鞔_、可控。

五、最佳實(shí)踐建議

1. 監(jiān)聽(tīng) props 時(shí)，始終使用 getter 寫法：() => props.xxx
2. 對(duì)對(duì)象/數(shù)組變化，記得加 deep: true
3. 需要初始化執(zhí)行？加 immediate: true
4. 避免在 watch 中修改被監(jiān)聽(tīng)的值，可能引發(fā)無(wú)限循環(huán)
5. 及時(shí)清理副作用（如取消請(qǐng)求），可在回調(diào)中返回清理函數(shù)（類似 useEffect）

watch(someRef, async (id) => {
  const cancelToken = axios.CancelToken.source()
  try {
    await axios.get(`/api/data/${id}`, { cancelToken: cancelToken.token })
  } catch (e) {
    if (!axios.isCancel(e)) throw e
  }
  // 返回清理函數(shù)
  return () => cancelToken.cancel()
})

六、總結(jié)

watch 是 Vue 3 組合式 API 中處理副作用和響應(yīng)式數(shù)據(jù)聯(lián)動(dòng)的核心工具。通過(guò)合理使用 deep、immediate 等選項(xiàng)，我們可以精準(zhǔn)控制監(jiān)聽(tīng)行為，提升應(yīng)用的響應(yīng)性和用戶體驗(yàn)。

以上就是一文詳解Vue3中watch的使用方法、寫法及應(yīng)用場(chǎng)景的詳細(xì)內(nèi)容，更多關(guān)于Vue3 watch使用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論