Vue 3 的 watch 不支持直接传入多个独立参数，但可通过数组包装、computed 组合、watchEffect 自动追踪或 getter 函数等方式监听多个响应式数据源。
Vue 3 的 watch 本身不支持直接传入多个独立参数（比如 watch(a, b, callback)），但可以通过几种结构化方式实现“同时监听多个响应式数据源”并精准触发联动逻辑。核心思路是：把多个变量组织成一个可响应、可追踪的监听目标，而不是强行拼凑参数。
用数组包装多个 ref 或 reactive 属性
这是最常用、语义最直接的方式。把多个 ref 或 reactive 的属性放进数组，watch 会统一追踪它们的变化，并在任意一个更新时触发回调。
- 新旧值都以数组形式传递，顺序严格对应监听数组中的位置
- 适用于独立 ref（如搜索关键词、筛选类型、页码）或从 reactive 中提取的属性（需用 getter 包装）
- 若其中某个值是对象，默认只监听引用变化；内部属性变更需配合
deep: true
示例：
const searchKey = ref('')const filterType = ref('all')
const page = ref(1)
watch([searchKey, filterType, page], ([newKey, newType, newPage], [oldKey, oldType, oldPage]) => {
console.log('关键词：', newKey, '→', oldKey)
console.log('类型：', newType, '→', oldType)
fetchData() // 联合查询
}, { immediate: true })
用 computed 组合关注字段再监听
当多个变量属于同一业务实体（如表单、用户配置），推荐用 reactive 统一管理，再通过 computed 提取关心的子集，最后监听该计算属性。
立即学习“前端免费学习笔记（深入）”；
- 避免无差别
deep: true带来的性能损耗 - 新旧值都是完整对象，可按字段做细粒度判断（如仅邮箱格式变才校验）
- 逻辑集中、易测试、后续扩展校验规则更自然
示例：
const form = reactive({ username: '', email: '', password: '' })const formStatus = computed(() => ({
hasUsername: !!form.username,
validEmail: /^\S+@\S+\.\S+$/.test(form.email),
passwordLength: form.password.length
}))
watch(formStatus, (cur, prev) => {
if (cur.validEmail !== prev.validEmail) {
showEmailTip(cur.validEmail)
}
})
用 watchEffect 自动追踪依赖
如果目标只是“任一变量变化就执行副作用”，不需要区分哪个变了、也不需要旧值，watchEffect 更简洁——它会自动收集内部读取的响应式依赖。
- 写法轻量，无需手动列依赖项
- 适合触发 API 请求、更新 DOM、同步状态等副作用场景
- 无法获取旧值，也不支持
immediate以外的选项（如deep）
示例：
const keyword = ref('')const status = ref('all')
const page = ref(1)
watchEffect(() => {
// 只要 keyword/status/page 中任一变化，这里就重跑
fetchList(keyword.value, status.value, page.value)
})
监听 reactive 对象的特定字段（用 getter 函数）
对于大型 reactive 对象，若只关心其中几个字段，可用箭头函数返回精简对象，再监听这个 getter —— 这样既避免监听整个对象，又能精准响应。
- 比监听整个 reactive +
deep: true更高效 - 新旧值都是对象，字段级对比清晰直观
- 注意：必须开启
deep: true，否则对象引用不变时不会触发（即使内部字段变了）
示例：
const user = reactive({ name: '', age: 0, role: 'user' })const watchSource = computed(() => ({
name: user.name,
role: user.role
}))
watch(watchSource, (newVal, oldVal) => {
if (newVal.role !== oldVal.role) {
logRoleChange(newVal.role)
}
}, { deep: true })
