最可靠方式是用 getter 函数作为侦听源：watch(() => user.profile.name, (newVal, oldVal) => {...})；监听多个字段可用数组或对象返回；props 属性必须包裹为函数才能响应式监听。

直接监听对象中某一个特定路径的属性，最可靠的方式是用 getter 函数作为侦听源。

用箭头函数返回嵌套路径值

Vue 3 的 watch 不支持字符串路径（如 'user.profile.name'），但允许传入一个函数，该函数返回你要监听的具体值。Vue 会在依赖收集阶段执行这个函数，从而精准追踪到那个深层属性。

• 写法示例：
  watch(() => user.profile.name, (newVal, oldVal) => { ... })
• 只要 user 是响应式对象（reactive 或 ref 包裹），且你访问的是响应式路径，修改 user.profile.name 就会触发回调
• 这种方式轻量、精准，不开启深度监听，性能更好

监听多个嵌套字段组合

当需要同时响应几个不同层级的属性变化（比如 user.profile.name 和 user.status），可以把它们统一包装进一个数组或对象中返回，再监听这个返回值。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 推荐写法：
  watch(() => [user.profile.name, user.status], ([newName, newStatus], [oldName, oldStatus]) => { ... })
• 也可以返回一个对象：
  watch(() => ({ name: user.profile.name, status: user.status }), (newObj, oldObj) => { ... })
• 注意：返回对象时，Vue 无法自动做浅比较，建议用数组形式或手动比对关键字段

避免直接监听整个对象再手动判断

不要这样写：
watch(user, (newVal) => { if (newVal.profile.name !== oldName) { ... } }, { deep: true })

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

• deep: true 会递归遍历整个对象，带来不必要的性能开销
• 你只关心某个字段，却让 Vue 检查所有嵌套属性，得不偿失
• 而且 oldVal 在 deep 模式下可能为 undefined 或不准确，逻辑容易出错

特殊情况：props 中的属性要加函数包裹

在 defineProps 接收的 props 中，属性本身不是响应式引用，直接传 props.xxx 不会触发监听。

• 错误写法：watch(props.test, () => {...}) → 不生效
• 正确写法：watch(() => props.test, () => {...}) → 显式创建响应式读取
• 原理：函数执行时读取 props.test，Vue 才能建立依赖追踪