Vue.js 默认无法侦听数组内部对象属性变化，需用 deep 监听、computed 提取关键字段或绑定唯一 key 监听单个对象，并注意 Vue 2/3 响应式差异及性能优化。
Vue.js 默认无法直接侦听数组内部对象属性的变化，比如 list[0].name 的修改。要实现对数组中每个对象的深层属性进行响应式监听，需结合 watch 的 deep 选项与合理数据结构设计，或改用计算属性 + 事件触发等更可控方式。
启用 deep 深度监听并注意性能开销
当数组内含对象，且需响应其任意嵌套属性变化时，watch 配置 deep: true 是基础手段。但要注意：它会对整个数组及其所有嵌套对象做递归遍历监听，开销较大，尤其在大数据量时可能卡顿。
- 仅在确实需要监听“任意字段”时启用
deep，避免滥用 - 监听目标应尽量具体，例如监听
items而非整个state - 配合
immediate: true可在初始化时也触发一次回调，便于同步视图状态
用 computed + watch 组合替代纯 deep 监听
若只关心某些关键字段（如 list[i].status 或 list[i].checked），可先用 computed 提取这些值构成新响应式数组，再监听该数组——既精准又轻量。
- 定义
computed: { statusList() { return this.list.map(item => item.status) } } - watch
statusList，变化时通过新旧值比对定位具体索引和差异项 - 此方式不触发深度遍历，响应更快，逻辑也更清晰
为数组项绑定唯一 key 并监听单个对象
若业务允许用户逐条操作（如编辑某一行），推荐给每项添加唯一 id，然后监听特定对象：watch: { 'list.find(i => i.id === activeId)': { handler() {}, deep: true } }。Vue 3 中还可配合 toRef 或 toRefs 精准提取响应式引用。
- 确保数组项有稳定标识（不建议用
index作 key） - 动态监听表达式需写在函数中返回响应式引用，避免模板字符串硬编码
- Vue 3 的
watch(source, callback, options)形式更灵活，支持传入 getter 函数
使用 Vue Devtools 辅助验证监听是否生效
数组内部属性未触发更新，常见原因是：对象本身非响应式（如直接赋值未用 Vue.set 或 this.$set）、监听路径错误、或 Vue 版本限制（Vue 2 对数组索引赋值不敏感）。开启 Devtools 查看组件 data 和 watcher 列表，能快速定位是数据没变、还是监听没绑上。
- Vue 2 中向数组某索引赋值（
arr[0] = {...}）不会触发更新，必须用this.$set(arr, 0, newValue) - Vue 3 使用 Proxy，已支持直接索引赋值，但仍需确保原对象是响应式创建的
- 在 watch 回调中加
console.log('triggered')是最直接的验证方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
