学习笔记--vue3 watch监听的各种姿势用法和总结

在 Vue 3 中，watch 监听不同数据源的方式有所不同

1. 监听单个 ref

import { ref, watch } from 'vue'

const count = ref(0)

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

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

2. 监听多个 ref

import { ref, watch } from 'vue'

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

// 方式1：使用数组
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log('count 变化:', newCount, oldCount)
  console.log('name 变化:', newName, oldName)
})

// 方式2：使用 getter 数组
watch(
  [() => count.value, () => name.value],
  ([newCount, newName], [oldCount, oldName]) => {
    console.log('多个数据变化')
  }
)

3. 监听单个 reactive

import { reactive, watch } from 'vue'

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

// ❌ 错误：直接传入 reactive 对象无法监听到内部属性的变化
watch(state, (newVal, oldVal) => {
  console.log('不会触发') // 深度监听时才会触发
})

// ✅ 正确：使用 getter 函数监听特定属性
watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log('count 变化:', newVal, oldVal)
  }
)

// ✅ 深度监听整个 reactive 对象
watch(
  () => state,
  (newVal, oldVal) => {
    console.log('state 任何属性变化都会触发')
  },
  { deep: true }
)

4. 监听多个 reactive 数据

import { reactive, watch } from 'vue'

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

// 方式1：使用 getter 数组
watch(
  [() => state1.count, () => state2.name],
  ([newCount, newName], [oldCount, oldName]) => {
    console.log('数据变化')
  }
)

// 方式2：深度监听整个 reactive 对象（不推荐）
watch(
  [() => state1, () => state2],
  ([newState1, newState2], [oldState1, oldState2]) => {
    // 注意：oldState1 和 newState1 指向同一个对象
    console.log('状态变化')
  },
  { deep: true }
)

5. 混合监听 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('混合数据变化')
  }
)

6. 监听响应式对象的属性

import { reactive, watch } from 'vue'

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

// 监听嵌套属性
watch(
  () => user.info.address.city,
  (newVal, oldVal) => {
    console.log('城市变化:', newVal, oldVal)
  }
)

// 深度监听整个对象
watch(
  () => user,
  (newVal, oldVal) => {
    console.log('user 任何变化')
  },
  { deep: true }
)

总结对比

数据源	监听方式	注意事项
单个 ref	watch(count, callback)	直接传入即可
多个 ref	watch([ref1, ref2], callback)	使用数组形式
单个 reactive 属性	watch(() => state.prop, callback)	必须使用 getter
多个 reactive 属性	watch([() => state.prop1, () => state.prop2], callback)	使用 getter 数组
整个 reactive	watch(() => state, callback, { deep: true })	必须深度监听

最佳实践建议

1. 优先使用 getter 函数，特别是监听 reactive 对象的属性
2. 避免深度监听大型对象，可能会影响性能
3. 注意旧值的引用问题：对于 reactive 对象，旧值可能与新值相同（因为引用未变）