最可靠方式是用 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 才能建立依赖追踪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
