Vue数组下标赋值不响应是因JS限制：Vue 2中Object.defineProperty无法劫持未定义索引，Vue 3中Proxy虽可拦截但为兼容性与性能默认不响应；需用$set/splice等方法确保响应式更新。
Vue 的响应式系统对数组下标赋值本身不自动响应，这不是缺陷，而是受 JavaScript 原生限制所致——arr[0] = newVal 这类操作无法被 Object.defineProperty（Vue 2）或 Proxy 的常规 trap（Vue 3 早期）捕获。真正起作用的，是 Vue 主动“劫持”了特定方法，再配合运行时补丁与 API 封装，才让开发者感知到“响应式”。
为什么 arr[index] = xxx 不触发更新？
根本原因在于：
- Vue 2 使用
Object.defineProperty劫持对象属性，但数组索引（如'0'）在初始化时若未显式定义，就不会被设为响应式属性；后续直接赋值只是给数组添加一个普通数据属性，不走 setter。 - Vue 3 的
reactive()基于 Proxy，理论上可拦截索引访问，但为保持与 Vue 2 行为一致及避免性能开销，默认仍不响应稀疏索引赋值（尤其对非 reactive 包裹的原始数组）。 - 修改
length同理：它是一个可写但不可枚举的自有属性，原生 setter 不触发依赖通知。
Vue 2 的“黑科技”：变异方法重写 + $set 全局兜底
Vue 2 在启动时悄悄重写了数组原型上的 7 个方法（push、pop、shift、unshift、splice、sort、reverse），每个方法内部都插入了依赖通知逻辑。这是最轻量、最可靠的响应式入口。
当必须按索引更新（比如表格单元格编辑回填），this.$set(arr, index, val) 是官方兜底方案：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 它先确保目标索引位置存在（若越界则扩展数组），再用
defineProperty显式将该索引转为响应式属性，最后赋值并触发更新。 - 等价于
Vue.set(this.arr, i, v)，本质是手动补全了 Vue 本应自动完成但受限于 JS 机制而无法完成的响应式初始化。
Vue 3 的演进：ref 与 reactive 的差异化处理
Vue 3 并非“修复”了下标赋值，而是根据响应式创建方式做了更精细的区分：
-
reactive([])数组（3.2+）：支持直接arr[i] = newVal，因为 Proxy 可以拦截set操作，且 Vue 内部做了索引合法性判断与响应式代理透传。 -
ref([])数组：仍不响应arr.value[i] = newVal，因ref的响应式层在.value整体，其内部仍是普通数组；此时需用arr.value.splice(i, 1, newVal)或展开赋值arr.value = [...arr.value.slice(0,i), newVal, ...arr.value.slice(i+1)]。
绕过黑科技的务实建议
不依赖底层机制，从编码习惯上规避问题：
- 优先用
splice(index, 1, newVal)替代下标赋值——语义清晰、兼容所有版本、不丢失 DOM 复用。 - 清空数组别写
arr.length = 0，改用arr.splice(0)或arr.splice(0, arr.length)。 - 批量更新时，避免
arr = newArray，改用arr.splice(0, arr.length, ...newArray)，保留引用，防止 input 失焦、滚动位置跳变。 - 若数组元素是对象，只改对象内部属性（如
arr[0].name = 'x'）完全合法——响应式瓶颈只在数组结构变更，不在嵌套对象。
