Vue.js 中 watch 多数据源应聚合为 computed 对象监听，精准提取字段避免过度 deep，首次触发需判空 oldVal，计算属性作监听源可实现依赖自动追踪与逻辑分离。
Vue.js 的 watch 可以监听单个响应式数据，但实际开发中常需同时响应多个来源（如多个 ref、多个 reactive 字段，或组合式 API 中的计算属性），并精准获取新旧值进行差异化处理。关键不在于“能不能”，而在于“怎么组织更清晰、不易出错”。
监听多个 ref 或 reactive 字段：用对象解构 + 深度监听
当需要同时响应多个独立响应式变量（比如搜索关键词 keyword 和筛选状态 status）时，不建议写多个 watch，容易逻辑分散、重复判断。推荐将它们统一包装成一个响应式对象再监听：
✅ 推荐写法（组合式 API）：
const keyword = ref('')
const status = ref('all')
// 将多个响应式源聚合为一个可监听的对象
const watchSource = computed(() => ({
keyword: keyword.value,
status: status.value
}))
watch(watchSource, (newVal, oldVal) => {
// newVal 和 oldVal 都是完整对象，可直接对比字段
if (newVal.keyword !== oldVal.keyword) {
console.log('关键词变了：', newVal.keyword)
}
if (newVal.status !== oldVal.status) {
console.log('状态变了：', newVal.status)
}
}, { deep: true }) // 必须开启 deep，否则对象引用不变时不会触发
监听 reactive 对象的多个字段：避免过度 deep，用 getter 精准提取
如果目标是一个大 reactive 对象（如表单数据 form），但只关心其中几个字段，盲目设 deep: true 会带来性能开销且无法区分具体哪个字段变。此时应显式返回关注字段组成的对象：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 用
computed提取子集，保证只有相关字段变化才触发 watch - 避免监听整个
reactive对象，防止无关更新干扰逻辑 - 新旧值结构一致，对比逻辑直观，无需遍历或猜测
示例：
const form = reactive({
name: '',
email: '',
age: 0,
avatar: null
})
// 只监听 name 和 email，忽略 age 和 avatar
const formWatchSource = computed(() => ({
name: form.name,
email: form.email
}))
watch(formWatchSource, (newVal, oldVal) => {
if (newVal.name !== oldVal.name) handleNameChange(newVal.name)
if (newVal.email !== oldVal.email) handleEmailChange(newVal.email)
})
在 watch 回调中安全获取新旧值：注意 undefined 边界情况
首次监听时，oldVal 是 undefined；若监听的是引用类型且未开启 deep，新旧值可能指向同一对象，导致浅对比失效。务必按类型做防御处理：
- 对基础类型（string/number/boolean），直接
===对比即可 - 对对象或数组，优先用
JSON.stringify粗略比对（仅适用于简单结构），或用 Lodash 的isEqual - 首次执行时主动检查
oldVal === undefined，避免报错或误判
稳妥的对比写法：
watch(watchSource, (newVal, oldVal) => {
if (oldVal === undefined) {
console.log('首次监听，跳过旧值处理')
return
}
// 基础字段对比
if (newVal.id !== oldVal.id) fetchDetail(newVal.id)
// 对象字段深对比（需引入 isEqual）
if (!isEqual(newVal.config, oldVal.config)) {
applyConfig(newVal.config)
}
})
监听计算属性（computed）与副作用联动：确保依赖明确、触发可控
有时真正要响应的不是原始数据，而是派生逻辑结果（例如 “是否满足提交条件”）。这时把 computed 当作 watch 源最自然：
- 计算属性自动追踪其内部依赖，watch 它等于间接监听了所有上游响应式数据
- 新旧值就是布尔值、字符串等简单类型，对比无歧义
- 逻辑内聚：判定规则写在 computed 里，副作用处理写在 watch 里，职责分离
例如：
const isFormValid = computed(() => {
return form.name.trim() && form.email.includes('@')
})
watch(isFormValid, (isValid, wasValid) => {
if (isValid && !wasValid) {
console.log('表单首次变有效，启用提交按钮')
}
if (!isValid && wasValid) {
console.log('表单失效，清空上次缓存结果')
}
}) 
