Vue监听深层属性需用getter函数、deep:true或computed：组合式API用watch(()=>obj.path)精准监听，deep:true递归监听但性能差，computed提取后再监听更清晰健壮。
Vue 默认只监听对象或数组的引用变化，内部属性改了不会自动触发 watch 回调。要让 user.profile.avatar 或 list[0].name 这类深层属性变更被捕捉，关键不是“能不能”，而是“怎么选对方式”。
用函数式监听精准捕获字段（推荐）
监听具体路径时，必须用 getter 函数包裹访问逻辑，Vue 才能建立准确依赖：
- 组合式 API：
watch(() => user.profile.avatar, (n, o) => {...}) - 选项式 API：
watch: { 'user.profile.avatar': (n, o) => {...} } - 嵌套可选链也支持：
watch(() => user?.settings?.theme || 'light', ...) - ⚠️ 注意：不能直接写
watch(user, ...)，否则只监听引用，内部变不触发
启用 deep: true 监听整个对象变动
适合需要响应任意嵌套层级变更的场景，比如表单整体校验、配置同步：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 组合式 API：
watch(() => user, (n, o) => {...}, { deep: true }) - 选项式 API：
watch: { user: { handler() {}, deep: true } } - ⚠️ 缺点：oldValue 在 deep 模式下不可靠（常与 newValue 相同），且会递归遍历全部子属性，对象越深性能开销越大
- 不建议用于大型数据结构，尤其含大量嵌套对象或长数组时
用 computed 提取后再监听（逻辑更清晰）
当路径复杂、含默认值或需复用时，先计算再监听是更健壮的做法：
立即学习“前端免费学习笔记（深入）”；
- 定义计算属性：
computed: { avatarUrl() { return this.user?.profile?.avatar || '' } } - 再监听它：
watch: { avatarUrl(newVal) { ... } } - 好处是依赖明确、调试直观、避免重复写路径，也天然规避了
undefined访问问题
监听数组内部对象属性的特别注意
数组本身响应，但 arr[0].name = 'xxx' 这类操作不会触发普通 watch：
- 轻量方案：用 computed 提取关注字段，如
statusList() { return this.list.map(i => i.status) }，再监听该计算属性 - 若必须监听整个数组结构变化，可用
{ deep: true }，但注意它会遍历每个元素及其所有属性 - Vue 2 中动态加属性要用
this.$set(arr[0], 'age', 18)；Vue 3 推荐初始就用 reactive 包裹，确保响应性从一开始就存在
