Vue 3 的 watch 支持直接传入响应式引用数组实现联合监听，任一成员变化即触发回调，新旧值均以对应顺序数组形式传递，推荐用于独立变量联动。
Vue 3 的 watch 支持直接传入一个响应式引用数组，实现对多个独立状态的联合监听。这不是“模拟”或多层封装，而是官方原生支持的语法，只要数组中每个元素都是有效的 ref、computed 或 reactive 的可访问属性（如 obj.name），就能被正确追踪。
传数组是标准且推荐的方式
把多个 ref 包装成数组传给 watch，是最直观、语义最清晰的做法。Vue 会将整个数组视为一个组合监听源，任一成员变化即触发回调：
- 新旧值都以数组形式传递，顺序与监听数组严格对应
- 无需额外包装或计算属性，适合关键词、筛选项、分页参数等独立变量联动
- 支持
immediate: true首次绑定时立即执行，常用于初始化加载
写法要点和常见错误
正确示例：
const filterType = ref('all')
const page = ref(1)
watch([searchKey, filterType, page], ([newKey, newType, newPage], [oldKey, oldType, oldPage]) => {
console.log('关键词变了？', newKey !== oldKey)
fetchData({ key: newKey, type: newType, page: newPage })
}, { immediate: true })
- ✅ 必须传
ref实例本身（如searchKey），不能传searchKey.value - ✅ 若某个
ref值是对象且需监听其内部属性，必须加deep: true - ❌ 不要传解构后的普通值（如
[searchKey.value, filterType.value]），这会失去响应性 - ❌ 不要混入非响应式变量（如字符串字面量、普通对象），会导致监听失效
什么时候不该用数组方式？
当多个变量同属一个 reactive 对象（比如表单数据 form = reactive({ name, email })）时，不建议直接监听 [form.name, form.email] —— 因为每次赋值都会创建新引用，导致频繁触发；更优解是用 computed 提取关键字段再监听该计算属性，结构清晰、性能可控、易于复用。
配合防抖与请求取消更实用
真实场景中，多变量联动常伴随输入高频、异步请求、竞态问题。可在回调中加入简单控制：
- 用
setTimeout+ 清除机制做轻量防抖 - 用
AbortController在新请求发起前中断旧请求 - 在
onCleanup中清理定时器或订阅，避免内存泄漏
