Vue.js 如何通过 watch 监听对象属性的变化-Vue.js-PHP中文网

vue.js监听对象属性变化需区分引用与内部字段：推荐用计算属性抽离目标字段再浅监听；必须监听整体时启用deep: true；数组内部属性变化需映射或深度监听；配合immediate、防抖和flush控制执行时机。

vue.js 如何通过 watch 监听对象属性的变化

Vue.js 中监听对象属性变化，核心在于区分“监听对象引用”和“监听内部字段”。直接用 watch 监听整个对象默认只响应引用变更（比如重新赋值），而多数业务场景需要的是 内部某个字段（如 user.profile.name）变了就触发。高效又可控的做法不是一上来就开 deep: true，而是按需选择策略。

用计算属性抽离目标字段再监听

这是最轻量、最推荐的方式，尤其适合只关心某一个或几个嵌套属性的场景。它避免了深度遍历开销，响应链路清晰，且天然支持 Vue 的响应式系统。

在 computed 中定义一个只返回目标字段的 getter，例如 userName() { return this.user?.profile?.name }
在 watch 中监听这个计算属性，用普通浅监听即可：userName(newVal, oldVal) { ... }
如果初始值可能为 undefined，建议配合可选链（?. ）和空值合并（??）保障健壮性

必须监听整个对象时启用 deep: true

当需要捕获对象任意嵌套层级的任意变更（比如表单配置对象整体校验），且无法提前预知哪些字段会变，才考虑深度监听。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

写法：在 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')