vue的watch监听不到数组变化是设计逻辑决定的，因默认只监听引用变化，不追踪内部内容变动；需用函数式监听+deep、监听length表达式或精准监听某项字段等正确方式。
监听数组结构变化（增删改项、长度变）
要捕获 `push`、`pop`、`splice`、清空、长度变化等整体行为，推荐两种可靠写法：
- Vue 3 推荐用函数式监听 + deep：`watch(() => arr, callback, { deep: true })`。Vue 3 对响应式数组做了优化，这种 deep watch 实际开销比普通对象小得多，且能覆盖所有变更类型（包括 `arr.length` 变化）。
- 直接监听 length 表达式：`watch(() => arr.length, callback)`。每次数组变更后重新读取 length，值不同即触发。注意：必须确保 `arr` 是 `ref` 或 `reactive` 包裹的响应式数组，否则无依赖收集。
监听数组某一项的某个字段（如 list[0].name）
不需要全量 deep，精准监听更高效、更安全：
- 写法示例：
watch(() => list[0]?.name, (newVal, oldVal) => {...})。利用可选链避免报错，只追踪该路径的响应式依赖。 - 若需监听多个项的同一字段（如所有 item.status），可用计算属性中转：
computed(() => list.map(i => i.status))，再监听这个计算属性。
避开常见失效写法
很多“监听不到”其实是操作本身绕过了响应式系统：
- 禁用索引直接赋值：`arr[0] = 'x'` 不触发 —— 改用 `arr.splice(0, 1, 'x')` 或 `Vue.set(arr, 0, 'x')`（仅 Vue 2）。
- 禁用 length 赋值重置：`arr.length = 0` 无效 —— 改用 `arr.splice(0)` 或 `arr.length = 0` 后配合 `triggerRef(arr)`（仅 shallowRef 场景）。
- 别监听字面量：`watch(arr.length, ...)` 是监听初始数值，后续变化完全不触发 —— 必须写成 `watch(() => arr.length, ...)`。
深度监听的注意事项
启用 `deep: true` 并非万能解，它有明确限制和代价：
- 仅对已存在的响应式属性生效；若对象新增了字段（如 `obj.newKey = val`），即使 deep 也监听不到 —— 需提前初始化或用 `reactive({ ... })` 完整定义。
- 回调中 `newVal` 和 `oldVal` 默认是响应式代理，`===` 比对恒为 true；需用 `toRaw()` 转原始值，或用 `lodash.isEqual` 做深比较。
- 数组大、嵌套深时性能明显下降；优先监听具体路径（如 `list[2].id`），而非整个 `list`。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
