vue3 watch默认不响应嵌套属性变化；推荐监听具体路径，如watch(() => user.profile.email, ...)；必须deep时应限制范围，如watch(() => user.profile, ..., {deep: true})；避免直接监听reactive对象。
Vue3 的 watch 默认只响应对象引用的变化，不追踪内部嵌套属性的修改。要监听深层属性变化，不能简单加 { deep: true } 就完事——它会触发全量递归遍历，带来明显性能开销，尤其在大型对象或高频更新场景下。
优先监听具体路径（最推荐）
如果你只关心某个字段（比如 user.profile.email 或 form.address.postcode），直接用 getter 函数返回该路径值即可。这种方式不走深度遍历，能精准捕获变化，oldValue 和 newValue 也完全可靠。
- 写法简洁：
watch(() => user.profile.email, (newVal, oldVal) => {...}) - 响应快、无冗余计算，适合绝大多数业务场景
- 支持 ref 和 reactive 定义的数据，行为一致
必须用 deep 时：只包裹必要范围
当确实需要响应对象任意子属性变动（例如配置编辑器、表单草稿自动保存），才启用 deep: true。但务必配合最小粒度的 getter，避免监听整个顶层响应式对象。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 正确：
watch(() => user.profile, callback, { deep: true })—— 只深监profile子树 - ❌ 避免：
watch(user, callback, { deep: true })—— Vue3 中此写法会忽略deep，且oldValue不准确 - ⚠️ 注意：
reactive对象被直接传入watch时，deep选项无效，且默认强制深度监听（无法关闭）
监听多个关键字段组合
若需同时响应几个分散的深层字段（如 user.name、user.status、settings.theme），把它们打包成数组传入，比开启 deep 更轻量、更可控。
- 写法：
watch(() => [user.name, user.status, settings.theme], ([n1, n2, n3], [o1, o2, o3]) => {...}) - 回调接收两个数组，按顺序一一对应，语义清晰
- 不会误触无关字段，也不触发深度扫描
避开 reactive 的隐式 deep 陷阱
用 reactive 创建的对象，一旦直接传给 watch，就会自动进入不可关闭的深度监听模式。这不仅浪费性能，还导致 oldValue 常常和 newValue 相同（拿不到真实旧值）。
- 解法一：改用
ref包裹对象，再监听：const userRef = ref(reactive({...}))，然后watch(userRef, ...) - 解法二：坚持路径监听，绕过直接监听整个
reactive对象 - 不建议强行用
shallowRef或markRaw干预，会破坏响应性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
