Vue侦听器通过响应式数据源（ref、reactive、getter等）动态追踪变化，支持单值监听（自动解包.value/computed）、多源数组监听、深层对象监听（deep或getter路径）及异步副作用处理（immediate/await），严禁修改被监听源以防循环。

Vue 侦听器（watch）处理动态响应式来源，关键在于明确“谁在变”和“怎么监听”。它不依赖固定字段名，而是通过响应式数据源本身触发回调——只要这个来源是 ref、reactive 对象、getter 函数，或它们的组合，就能被动态追踪。

监听单个 ref 或计算属性

最常见也最直接的方式：传入一个 ref（如 count）或计算属性（computed(() => ...)）。Vue 会自动读取其 .value（ref）或执行 getter（computed），并建立依赖关系。

• 不需要手动加 .value，watch 内部已处理
• 回调接收新旧值：(newVal, oldVal) => {...}
• 适合监听简单状态，比如搜索关键词、开关状态、表单输入

监听多个响应式来源

当多个变量变化都需触发同一逻辑（如姓名+年龄变更时更新用户摘要），可将它们放入数组传给 watch：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 数组元素必须是 ref、reactive 属性访问器或 getter 函数
• 回调接收两个数组：([new1, new2], [old1, old2]) => {...}
• 注意：不能写 [count.value, name.value]，要传 count 和 name 本体

监听 reactive 对象的深层变化

对对象或嵌套结构（如 user.profile.avatar）做细粒度响应，有两种方式：

立即学习“前端免费学习笔记（深入）”；

• 用 getter 函数包装路径：watch(() => state.user.name, (newName, oldName) => {...})
• 直接监听整个 reactive 对象，默认启用深层监听（deep: true）
• 若只需监听某一层，或限制嵌套深度（Vue 3.5+），可显式配置 deep: 2

监听异步或副作用场景

watch 天然适合处理副作用：发请求、更新 DOM、重置其他状态等。配合 immediate: true 可立即执行一次，常用于初始化加载；配合 async 回调能自然处理 Promise：

• 回调中可 await 请求，再更新关联状态
• 注意 loading 状态管理，避免重复触发或竞态问题
• 不要在 watch 里修改被监听的源本身，否则可能造成无限循环