Vue 3 中监听多个数据变化的几种方法

1. 使用 watch监听多个 ref/reactive 数据

import { ref, watch } from 'vue'export default {setup() {const count = ref(0)const name = ref('')const user = reactive({ age: 20 })// 监听多个数据源watch([count, name, () => user.age], // 数组形式传入多个数据源([newCount, newName, newAge], [oldCount, oldName, oldAge]) => {console.log('count changed:', newCount, oldCount)console.log('name changed:', newName, oldName)console.log('age changed:', newAge, oldAge)// 执行相关操作})return { count, name, user }}
}

2. 使用 watchEffect自动追踪依赖

import { ref, watchEffect } from 'vue'export default {setup() {const count = ref(0)const name = ref('')const active = ref(false)watchEffect(() => {// 这里会自动追踪所有使用到的响应式数据console.log('数据变化:', count.value, name.value, active.value)// 执行相关操作})return { count, name, active }}
}

3. 监听对象多个属性

import { reactive, watch } from 'vue'export default {setup() {const state = reactive({count: 0,name: '',active: false})// 监听对象多个属性watch(() => [state.count, state.name],([newCount, newName], [oldCount, oldName]) => {console.log('count or name changed')})return { state }}
}