Vue.js 的 watch 默认不监听数组内部对象属性变化，需启用 deep: true 或通过计算属性、Composition API 的函数监听等方式实现精准响应，同时注意索引赋值无效、过滤结果非响应式等限制。
Vue.js 的 watch 默认不会深度监听数组内部对象属性的变化，比如 list[0].name 改了，普通写法可能收不到通知。要正确监听，得结合深度监听、计算属性或响应式 API 的特性来处理。
✅ 正确监听数组中对象属性变化（Vue 2 / Vue 3 Options API）
直接监听数组本身是浅层的，只响应数组长度变化或元素替换（如 push、splice），不响应内部对象属性变更。想监听 list[0].name 这类变化，必须开启 deep: true：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 写法示例（Vue 2 / Options API）：
watch: {
list: {
handler(newVal, oldVal) {
console.log('数组内容或内部对象属性变了')
},
deep: true,
immediate: false
}
}
- 注意：开启
deep后，Vue 会递归遍历整个数组及每个对象的属性，性能开销明显增大，尤其数组大或嵌套深时慎用 - 该方式能捕获
list[0].name = 'new'、this.$set(list[0], 'age', 18)等操作（Vue 2 中直接赋值非响应式属性需用$set）
✅ 更精准：监听计算属性（推荐用于特定字段）
如果只关心数组中某类字段（如所有 item.status），用计算属性提取再监听，更可控、性能更好：
- 示例（Vue 2 / 3 Options API）：
computed: {
statusList() {
return this.list.map(item => item.status)
}
},
watch: {
statusList: {
handler(newStatuses) {
console.log('任意 item.status 变了', newStatuses)
}
}
}
- 优势：避免全量深度遍历；变化来源清晰；可配合
JSON.stringify做简单防抖（但不推荐长期依赖字符串比对） - 限制：仅适用于可被映射为简单值的属性；无法区分是哪个索引的 item 变了，如需定位需额外处理
✅ Vue 3 Composition API 中的现代解法
使用 watch 配合响应式引用或函数返回值，灵活性更高：
- 监听整个数组并深度响应（等价于
deep: true）：
import { watch } from 'vue'
watch(
() => state.list,
(newVal, oldVal) => {
console.log('list 或其任意嵌套属性变了')
},
{ deep: true }
)
- 监听特定路径（Vue 3.4+ 支持）：
// 监听 list 中每个 item 的 name 字段（需配合 computed 或 map）
watch(
() => state.list.map(i => i.name),
(names) => {
console.log('任一 name 变化', names)
}
)
- 注意：箭头函数返回数组时，watch 仍能响应其元素变化（因依赖收集到了每个
i.name） - 若用
ref或reactive包裹原始数据，确保所有层级都是响应式的（避免解构丢失响应性）
⚠️ 关键限制与避坑提醒
-
数组索引直接赋值无效：Vue 无法检测
arr[0] = {...}，必须用Vue.set(arr, 0, ...)（Vue 2）或arr.splice(0, 1, ...)/ 使用ref+ 替换整个项（Vue 3） -
过滤/映射后的新数组不是响应式别名：不要监听
list.filter(...)这种表达式结果，它每次返回新数组，watch 会误判为“总是变化” -
deep watch 不触发 getter 式计算：如果数组元素是通过
computed生成的对象，且未被实际读取过，deep watch 可能漏掉初始依赖 -
Vue 3 中 shallowRef / markRaw 会跳过响应式追踪：对用
markRaw包裹的对象，即使在数组里，deep: true也监听不到其内部变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
