快捷導(dǎo)航

vue3中watch監(jiān)聽(tīng)不同數(shù)據(jù)源的方法總結(jié)

更新時(shí)間：2026年03月26日 08:57:47 作者：送魚(yú)的老默

這篇文章主要為大家詳細(xì)介紹了vue3中watch監(jiān)聽(tīng)不同數(shù)據(jù)源的常用方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,大家可以根據(jù)自己的需要進(jìn)行選擇

1. 監(jiān)聽(tīng)單個(gè) ref
2. 監(jiān)聽(tīng)多個(gè) ref
3. 監(jiān)聽(tīng)單個(gè) reactive
4. 監(jiān)聽(tīng)多個(gè) reactive 數(shù)據(jù)
5. 混合監(jiān)聽(tīng) ref 和 reactive
6. 監(jiān)聽(tīng)響應(yīng)式對(duì)象的屬性
總結(jié)對(duì)比
最佳實(shí)踐建議

在 Vue 3 中，watch 監(jiān)聽(tīng)不同數(shù)據(jù)源的方式有所不同

1. 監(jiān)聽(tīng)單個(gè) ref

import { ref, watch } from 'vue'

const count = ref(0)

// 直接傳入 ref
watch(count, (newVal, oldVal) => {
  console.log('count 變化:', newVal, oldVal)
})

// 或者使用 getter 函數(shù)
watch(() => count.value, (newVal, oldVal) => {
  console.log('count 變化:', newVal, oldVal)
})

2. 監(jiān)聽(tīng)多個(gè) ref

import { ref, watch } from 'vue'

const count = ref(0)
const name = ref('John')

// 方式1：使用數(shù)組
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log('count 變化:', newCount, oldCount)
  console.log('name 變化:', newName, oldName)
})

// 方式2：使用 getter 數(shù)組
watch(
  [() => count.value, () => name.value],
  ([newCount, newName], [oldCount, oldName]) => {
    console.log('多個(gè)數(shù)據(jù)變化')
  }
)

3. 監(jiān)聽(tīng)單個(gè) reactive

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0,
  name: 'John'
})

// ? 錯(cuò)誤：直接傳入 reactive 對(duì)象無(wú)法監(jiān)聽(tīng)到內(nèi)部屬性的變化
watch(state, (newVal, oldVal) => {
  console.log('不會(huì)觸發(fā)') // 深度監(jiān)聽(tīng)時(shí)才會(huì)觸發(fā)
})

// ? 正確：使用 getter 函數(shù)監(jiān)聽(tīng)特定屬性
watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log('count 變化:', newVal, oldVal)
  }
)

// ? 深度監(jiān)聽(tīng)整個(gè) reactive 對(duì)象
watch(
  () => state,
  (newVal, oldVal) => {
    console.log('state 任何屬性變化都會(huì)觸發(fā)')
  },
  { deep: true }
)

4. 監(jiān)聽(tīng)多個(gè) reactive 數(shù)據(jù)

import { reactive, watch } from 'vue'

const state1 = reactive({ count: 0 })
const state2 = reactive({ name: 'John' })

// 方式1：使用 getter 數(shù)組
watch(
  [() => state1.count, () => state2.name],
  ([newCount, newName], [oldCount, oldName]) => {
    console.log('數(shù)據(jù)變化')
  }
)

// 方式2：深度監(jiān)聽(tīng)整個(gè) reactive 對(duì)象（不推薦）
watch(
  [() => state1, () => state2],
  ([newState1, newState2], [oldState1, oldState2]) => {
    // 注意：oldState1 和 newState1 指向同一個(gè)對(duì)象
    console.log('狀態(tài)變化')
  },
  { deep: true }
)

5. 混合監(jiān)聽(tīng) ref 和 reactive

import { ref, reactive, watch } from 'vue'

const count = ref(0)
const state = reactive({ name: 'John', age: 18 })

watch(
  [count, () => state.name, () => state.age],
  ([newCount, newName, newAge], [oldCount, oldName, oldAge]) => {
    console.log('混合數(shù)據(jù)變化')
  }
)

6. 監(jiān)聽(tīng)響應(yīng)式對(duì)象的屬性

import { reactive, watch } from 'vue'

const user = reactive({
  info: {
    name: 'John',
    address: {
      city: 'Beijing'
    }
  }
})

// 監(jiān)聽(tīng)嵌套屬性
watch(
  () => user.info.address.city,
  (newVal, oldVal) => {
    console.log('城市變化:', newVal, oldVal)
  }
)

// 深度監(jiān)聽(tīng)整個(gè)對(duì)象
watch(
  () => user,
  (newVal, oldVal) => {
    console.log('user 任何變化')
  },
  { deep: true }
)

總結(jié)對(duì)比

數(shù)據(jù)源	監(jiān)聽(tīng)方式	注意事項(xiàng)
單個(gè) ref	watch(count, callback)	直接傳入即可
多個(gè) ref	watch([ref1, ref2], callback)	使用數(shù)組形式
單個(gè) reactive 屬性	watch(() => state.prop, callback)	必須使用 getter
多個(gè) reactive 屬性	watch([() => state.prop1, () => state.prop2], callback)	使用 getter 數(shù)組
整個(gè) reactive	watch(() => state, callback, { deep: true })	必須深度監(jiān)聽(tīng)

最佳實(shí)踐建議

優(yōu)先使用 getter 函數(shù)，特別是監(jiān)聽(tīng) reactive 對(duì)象的屬性
避免深度監(jiān)聽(tīng)大型對(duì)象，可能會(huì)影響性能
注意舊值的引用問(wèn)題：對(duì)于 reactive 對(duì)象，舊值可能與新值相同（因?yàn)橐梦醋儯?/li>

到此這篇關(guān)于vue3中watch監(jiān)聽(tīng)不同數(shù)據(jù)源的方法總結(jié)的文章就介紹到這了,更多相關(guān)vue3 watch監(jiān)聽(tīng)數(shù)據(jù)源內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: