Vue.js监听对象属性变化需区分引用与内部字段：推荐用计算属性抽离目标字段再浅监听；必须监听整体时启用deep: true；数组内部属性变化需映射或深度监听；配合immediate、防抖和flush控制执行时机。
Vue.js 中监听对象属性变化，核心在于区分“监听对象引用”和“监听内部字段”。直接用 watch 监听整个对象默认只响应引用变更（比如重新赋值），而多数业务场景需要的是 内部某个字段（如 user.profile.name）变了就触发。高效又可控的做法不是一上来就开 deep: true，而是按需选择策略。
用计算属性抽离目标字段再监听
这是最轻量、最推荐的方式，尤其适合只关心某一个或几个嵌套属性的场景。它避免了深度遍历开销，响应链路清晰，且天然支持 Vue 的响应式系统。
- 在
computed中定义一个只返回目标字段的 getter，例如userName() { return this.user?.profile?.name } - 在
watch中监听这个计算属性，用普通浅监听即可：userName(newVal, oldVal) { ... } - 如果初始值可能为
undefined，建议配合可选链（?.）和空值合并（??）保障健壮性
必须监听整个对象时启用 deep: true
当需要捕获对象任意嵌套层级的任意变更（比如表单配置对象整体校验），且无法提前预知哪些字段会变，才考虑深度监听。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 写法：在 watch 配置中显式设置
deep: true，并配handler回调 - 注意性能：对象结构越深、属性越多，初始化和后续变更时的递归追踪开销越大
- 确保对象已完整初始化，避免监听
null或undefined值导致静默失败
监听数组中对象的属性变化
数组本身是响应式的，但 watch 默认只响应 push、pop、索引重赋值等操作，不响应 list[0].name = 'new' 这类内部修改。
立即学习“前端免费学习笔记（深入）”；
- 若需监听所有元素中某个字段（如所有
item.status），可用计算属性映射：statusList() { return this.list.map(i => i.status) }，再监听statusList - 若必须监听整个数组及其内容，同样启用
deep: true，但要注意数组长度大时性能明显下降 - Vue 2 中对数组索引直接赋值（
this.list[0].name = 'x'）不会触发响应，需用this.$set(this.list[0], 'name', 'x')
配合 immediate 和防抖处理实际逻辑
监听只是起点，真实业务常涉及异步请求、DOM 操作或状态同步，需额外控制时机和竞态。
- 加
immediate: true可在组件创建时立即执行一次回调，适合初始化加载 - 用户频繁输入或切换时，用防抖（
lodash.debounce）延迟执行 API 请求，避免无效调用 - 使用
flush: 'post'确保回调在 DOM 更新后运行，方便做focus()或滚动定位 - 手动清理定时器、未完成的 fetch 请求或事件监听器，防止内存泄漏
