Vue侦听器能监听数组变化，但仅限push、pop、shift、unshift、splice、sort、reverse这7个变异方法；直接索引赋值（如arr[0] = x）或修改length在Vue 2中完全不触发，Vue 3中需配合reactive或deep: true才可靠响应。
Vue 侦听器能监听数组变化，但效果取决于操作方式和 Vue 版本。关键不是“能不能监听”，而是“怎么改才能被侦听到”。
哪些数组操作会被自动侦听到
Vue 对 7 个原生数组方法做了拦截处理，调用它们会触发响应式更新和 watch 回调：
- push()、pop()、shift()、unshift()
- splice()（增删改都支持）
- sort()、reverse()
这些方法修改的是数组内容本身，且 Vue 在内部重写了它们的逻辑，确保依赖收集与触发机制正常工作。
哪些操作不会触发侦听，以及如何修复
直接通过索引赋值或修改 length 属性，在 Vue 2 中完全不会被侦听；Vue 3 虽用 Proxy 支持了这两类操作，但仍有边界情况需要注意：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- vm.arr[0] = 'new' → 不触发（Vue 2 必须避免；Vue 3 可行但需确保 arr 是 reactive 或 ref）
- vm.arr.length = 0 → Vue 2 失效；Vue 3 可侦听，但部分场景下 watch 可能不响应（如未启用 deep）
- 推荐替代方案：this.$set(vm.arr, index, value)（Vue 2）或 arr.splice(index, 1, value)
- 更通用的做法：用 ref 包裹数组并配合 watch 的 deep: true 选项（尤其在组合式 API 中）
watch 如何正确配置以捕获数组内部变化
默认 watch 只监听数组引用是否更换，不关心内部元素变动。要响应元素级变化，必须显式启用深度监听：
- 选项式 API：
watch: { list: { handler() {}, deep: true } } - 组合式 API：
watch(list, callback, { deep: true }) - Vue 3.5+ 支持
deep: 2控制嵌套层级，避免过度监听带来的性能开销 - 注意：若数组内含对象，仅 deep: true 不够——还需确保对象本身是响应式的（例如用 reactive 包裹，而非普通对象字面量）
避免重复触发和误判的实用建议
数组长度变化或频繁 push/pop 容易导致 watch 多次执行，尤其在初始化或批量操作时：
- 在回调中加判断，比如
if (newValue.length !== oldValue.length)再执行业务逻辑 - 使用
immediate: false（默认值），防止组件创建时立即触发 - 对异步操作（如请求后端）加防抖或节流，或用
watchEffect配合条件控制 - 若只需响应“有无变化”，可用计算属性过滤后监听，减少 watch 负担
