Vue 多变量联动推荐用数组监听多个 ref、computed 聚合 reactive 字段或 watchEffect 自动追踪；需防抖、取消竞态请求、级联清空及首次判空处理。
Vue 的 watch 本身不支持直接传入多个独立参数，但处理多来源联动的核心思路很明确：把需要关联的值组织成一个可响应、可追踪的单元，再统一监听。不是硬塞变量，而是让变化逻辑有结构、可预测、易维护。
用数组监听多个 ref（最常用）
适合关键词、筛选项、页码等彼此独立又需联合响应的状态。
- 必须传响应式引用本身（如
searchKey），不能传searchKey.value - 回调接收两个数组：
([newA, newB], [oldA, oldB])，索引严格对应，可直接比对差异 - 若其中某个 ref 是对象，默认只监听引用变化；需监听内部属性时加
deep: true - 加
{ immediate: true }可在初始化时立即执行一次，常用于首屏加载
用 computed 聚合 reactive 字段（推荐用于表单/业务对象）
当多个字段同属一个 reactive 对象（如 form = reactive({ name, email, password })），不建议监听整个对象——开销大、触发频繁、难定位变化源。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 定义计算属性提取关键字段：
const formStatus = computed(() => ({ hasName: !!form.name, validEmail: isValid(form.email) })) - 监听这个计算属性，新旧值都是完整对象，字段对比一目了然
- 避免盲目开启
deep: true，性能更可控，逻辑也更聚焦 - 后续新增校验规则只需改
computed内容，watch无需动
用 watchEffect 自动追踪（适合副作用驱动场景）
如果目标只是“只要相关数据一变，就执行某操作”，且不需要旧值或精细比对，watchEffect 更轻量简洁。
立即学习“前端免费学习笔记（深入）”；
- 在回调里直接读取
searchKey.value、filterType.value等，它会自动收集依赖 - 每次任一依赖更新，整个函数体重新执行，适合发请求、更新 UI 状态等
- 不提供旧值，也不支持
deep或flush等选项；如需差异化处理，仍选watch数组方式 - 配合
onInvalidate可中断前序异步操作，比如取消未完成的 fetch 请求
联动中不可忽略的实战细节
真实项目里，多变量联动常伴随异步、高频、状态残留等问题，需主动管理。
- 加防抖：在回调里用
setTimeout或lodash.debounce控制请求频率，避免用户连点触发多次 - 取消竞态请求：每次新触发前调用
AbortController.abort()，防止旧请求返回覆盖新结果 - 级联清空：如下拉框 A 变化时，B 和 C 应重置为空或默认值，避免无效状态残留
- 首次触发判空：
oldVal在首次执行时为undefined，做字段比对前先判断是否为有效值
