快捷導(dǎo)航

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

更新時間：2026年03月26日 08:57:47 作者：送魚的老默

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

1. 監(jiān)聽單個 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)聽多個 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('多個數(shù)據(jù)變化')
  }
)

3. 監(jiān)聽單個 reactive

import { reactive, watch } from 'vue'

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

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

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

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

4. 監(jiān)聽多個 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)聽整個 reactive 對象（不推薦）
watch(
  [() => state1, () => state2],
  ([newState1, newState2], [oldState1, oldState2]) => {
    // 注意：oldState1 和 newState1 指向同一個對象
    console.log('狀態(tài)變化')
  },
  { deep: true }
)

5. 混合監(jiān)聽 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)聽響應(yīng)式對象的屬性

import { reactive, watch } from 'vue'

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

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

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

總結(jié)對比

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

最佳實踐建議

優(yōu)先使用 getter 函數(shù)，特別是監(jiān)聽 reactive 對象的屬性
避免深度監(jiān)聽大型對象，可能會影響性能
注意舊值的引用問題：對于 reactive 對象，舊值可能與新值相同（因為引用未變）

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

您可能感興趣的文章: