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 包装
