vue 3 的 watch 默认无法捕获数组内部元素变化，因其采用浅监听机制，仅响应引用替换；需通过 deep: true、函数式监听特定字段或 length 表达式等方式实现精准响应。
不能，默认情况下捕获不到。
为什么内部元素变化不触发 watch
Vue 3 的 watch 默认是浅监听，只响应数组引用是否被替换（比如 arr = [...arr, newItem]），不追踪内部元素的增删、索引赋值或对象属性修改。例如：
-
arr.push(item)→ 能触发（因 Vue 3 的 Proxy 拦截了变异方法） -
arr[0].name = 'new'→ 不触发（除非启用deep: true） -
arr[1] = newItem→ Vue 3 支持，但仅当arr是reactive或ref包裹的响应式数组时才有效 -
arr.length = 0→ 不直接触发 length 变化监听，因length是只读 getter，无独立响应性
能捕获内部变化的三种可靠方式
① 函数式监听 + deep
最通用、推荐用于结构或内容整体变动：
watch(() => arr, (newVal, oldVal) => {
console.log('数组任意变化都捕获到了')
}, { deep: true })
Vue 3 对响应式数组做了优化，这种写法开销可控，覆盖 push/pop/splice、索引修改、length 变更等全部场景。
② 精准监听某一项的字段
不需 deep，高效且安全：
watch(() => arr[0]?.id, (newId) => { /* 只关心第 0 项 id */ })
利用可选链避免报错，Vue 会精准追踪该响应式路径。
③ 监听 length 表达式
轻量级监听增删行为：
watch(() => arr.length, (newLen) => {
console.log('长度变了：', newLen)
})
注意必须写成函数形式 () => arr.length，直接传 arr.length 是监听初始数值，无效。
必须避开的失效操作
- 用字面量数组赋值：
arr = [{ name: 'a' }]→ 替换了引用，旧 watch 失效 - 索引直接赋值但数组非响应式：
const arr = []（未用ref或reactive）→ 完全无响应 - 监听普通对象数组中的非响应式对象：
arr = reactive([{ name: 'x' }])✅，但arr = reactive([{}])后再arr[0].age = 18❌（对象本身没被reactive包裹） - 父组件传入非响应式数据，如
:list="[{...}]→ 子组件无法监听内部变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
