Vue watch默认只监听对象引用变化，内部属性修改不触发；精准监听特定路径（如user.profile.name）最轻量可靠，无需deep；深度监听须用getter函数配合{deep: true}，避免直接传对象。

Vue 的 watch 默认只监听对象的引用变化，改了内部属性（比如 user.profile.name）根本不会触发回调——这不是 bug，是响应式设计的底层逻辑。要让深层修改也能响应，关键不是“加不加 deep: true”，而是**怎么加、加给谁**。

精准监听特定路径（推荐首选）

如果你只关心某个固定字段（如 user.profile.avatar 或 form.address.city），直接监听该路径最轻量、最可靠：

• 选项式 API：'user.profile.avatar': (newVal, oldVal) => { ... }
• 组合式 API：watch(() => user.profile.avatar, (newVal, oldVal) => { ... })
• 无需 deep: true，不递归遍历，性能好，oldVal 和 newVal 也准确可比

启用深度监听时必须用 getter 函数

想监听整个对象任意嵌套属性的变化？可以，但必须配合箭头函数包裹，否则 deep: true 在 Vue 3 中会失效或导致 oldVal 不可用：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• ✅ 正确：watch(() => user, (newVal, oldVal) => { ... }, { deep: true })
• ❌ 错误：watch(user, callback, { deep: true }) —— 这种写法在 Vue 3 中被忽略
• 注意：深度监听会遍历所有嵌套属性，对象越大开销越高，慎用于大型数据结构

监听多个深层字段，用数组传入

当几个关键字段都需要响应（比如 user.name 和 user.status），不必写多个 watch，把它们打包成数组即可：

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

• watch([() => user.name, () => user.status], ([newName, newStatus], [oldName, oldStatus]) => { ... })
• 回调接收两个数组参数，一一对应，逻辑清晰，避免无谓的深度扫描

替代方案：computed 提取 + 普通 watch

路径太深、逻辑复杂或需做预处理时，先用 computed 封装关注值，再对计算属性监听：

• const avatarUrl = computed(() => user.value?.profile?.avatar || '')
• watch(avatarUrl, (newVal) => { ... })
• 好处是解耦、可复用、调试直观，且天然支持响应式链路，适合中大型项目