Vue数组索引直接赋值不触发更新，因JS无法拦截索引操作；Vue2重写变异方法并提供$set兜底，Vue3用Proxy但仍需splice等规范操作确保响应式。
Vue.js 的响应式系统对数组索引直接赋值（如 arr[0] = newValue）不触发更新，根本原因在于 JavaScript 无法拦截数组的索引访问与赋值操作——Object.defineProperty（Vue 2）或 Proxy（Vue 3）对数组索引属性的劫持存在天然限制。
Vue 2 的解决方案：重写数组变异方法 + 代理索引赋值
Vue 2 无法通过 defineProperty 为每个数组索引（如 arr[0]）设置 getter/setter（因索引是动态数字键，且数量不可预知）。因此它采用“方法劫持”策略：
- 重写了数组原型上的 7 个变更方法：
push、pop、shift、unshift、splice、sort、reverse，使其在执行时主动通知依赖更新； - 对索引赋值（
arr[n] = val）和长度修改（arr.length = newLen）这类无法拦截的操作，Vue 提供了Vue.set(arr, index, value)或this.$set(arr, index, value)作为兜底方案——它会手动将新值添加为响应式属性，并触发更新； - 内部实现上，
$set会先判断目标是否为数组，若是，则调用splice(index, 1, value)（等效于插入+覆盖），从而走已劫持的变异方法路径。
Vue 3 的解决方案：Proxy 全面接管 + 智能索引处理
Vue 3 使用 Proxy 代理整个数组对象，理论上可拦截 set 操作，包括 arr[0] = x。但实际仍需额外处理，原因有二：
-
Proxy对arr[index]的set确实能捕获，但仅当该索引**原本就存在**（即index ）；若对稀疏数组或越界索引赋值（如 <code>arr[100] = x且length === 1），会改变length属性，而length的变化本身不会触发依赖更新； - 为保持行为一致性与性能，Vue 3 仍保留
Vue.set（已别名为Vue.set === Vue.reactive不再推荐，改用ref/reactive配合nextTick或直接使用array.splice）； - 更推荐的做法是：用
splice(index, 1, newValue)替代arr[index] = newValue，或使用ref包裹数组后，通过.value[index] = ...并配合triggerRef显式通知（适用于极少数边界场景）。
开发者应遵循的最佳实践
绕过底层机制，从编码习惯层面规避问题最有效：
立即学习“前端免费学习笔记（深入）”；
- 修改数组元素优先使用
splice(index, 1, newItem)，它明确、可响应、语义清晰； - 新增元素统一用
push/unshift/splice，避免直接写arr[arr.length] = x； - 在
setup中使用ref定义数组时，确保所有修改都发生在.value上，且尽量走已知响应式路径； - 对需要频繁按索引更新的场景（如表格编辑），考虑用
Map或以对象形式存储（{ id: { ... } }），再用computed转为数组，兼顾响应性与灵活性。
不复杂但容易忽略：响应式不是魔法，它依赖框架对操作路径的精确识别。理解哪些操作被代理、哪些需人工介入，才能写出稳定可靠的 Vue 数组逻辑。
