Vue 3 响应式监听需用 getter 函数精准追踪路径，如 () => user.profile.name；deep: true 须配合 getter 使用，watch(() => user, cb, { deep: true }) 才有效；ref 嵌套属性同样需函数式写法。

Vue 3 的响应式数据默认不会自动捕获对象内部属性的修改，比如 user.profile.name = '李四' 这类操作，除非你明确启用深度监听机制。核心在于：**响应式系统只追踪“被访问过”的路径，而监听器是否触发，取决于你如何定义监听源**。

用 getter 函数精准监听某条路径

这是最推荐、性能最好、语义最清晰的方式。Vue 能通过函数体内的属性访问建立精确依赖链。

• 监听嵌套字段时，必须写成箭头函数：() => user.profile.name，不能直接传 user.profile
• 支持多层嵌套：() => user.settings.theme.colors.primary
• oldValue 和 newValue 都准确可用，适合做差异比对或回滚逻辑
• 不触发整棵树遍历，响应快、无冗余开销

用 deep: true 监听整个对象（慎用）

当确实需要响应任意层级变更（如表单整体校验、配置项热更新），可开启深度监听，但要注意写法和限制。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 正确写法是：watch(() => user, callback, { deep: true }) —— 源必须是 getter 函数
• 错误写法：watch(user, callback, { deep: true }) —— Vue 会忽略 deep 配置，且 oldValue 不可靠（常与 newValue 相同）
• deep 模式会递归遍历所有可代理属性（对象、数组、Map 等），跳过原始类型和不可代理对象（Date、RegExp 等）
• 性能开销随对象复杂度上升，不适合高频更新的大对象

借助 watchDeep 简化 deep 场景

如果你频繁使用 { deep: true }，VueUse 提供的 watchDeep 是更简洁安全的选择。

• 它本质就是预设了 deep: true 的 watch 封装：watchDeep(user, callback) 等价于 watch(() => user, callback, { deep: true })
• 函数名自带语义，避免遗漏配置；源码层面已规避常见误用
• 适用于调试、日志埋点、状态快照等对性能不敏感但需覆盖全路径的场景

ref 包裹的对象也遵循同一规则

即使数据是 ref({ profile: { avatar: '' } })，监听深层属性仍需函数式写法。

• ✅ 正确：watch(() => user.value.profile.avatar, ...)
• ❌ 不推荐：watch(user, ..., { deep: true }) —— 因为 ref 的 value 是一层包装，deep 容易误判或低效
• ref 的深层响应性，底层依然依赖 reactive 的懒递归机制，只是多了一层 value 包装

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！