Vue 3 的 reactive 数组对索引赋值和 length 修改不响应是因 Proxy 机制限制；3.2+ 仅支持合法索引更新，length 操作始终应避免，推荐统一使用 splice 等变异方法。
Vue 3 的 reactive 对数组本身是完全响应式的，但**直接通过索引赋值（如 arr[0] = newVal）或修改 length（如 arr.length = 0）在 Vue 3.2 之前不会触发视图更新**。这不是 bug，而是 Proxy 的底层机制决定的——它无法拦截对数组索引的“属性写入”和对 length 的直接赋值操作。
为什么索引赋值和 length 修改不响应？
Proxy 只能拦截明确的方法调用（如 push、splice）或对象属性的 set 操作。而：
-
arr[0] = newVal实质是给数组这个对象的"0"属性赋值，但早期 Proxy 的set拦截器默认不处理数字键的“越界写入”或“已有索引更新”的语义区分； -
arr.length = 0是修改数组的一个特殊自有属性，Proxy 并未默认将其纳入响应式追踪路径。
Vue 3.2+ 开始支持索引赋值（有限制）
从 Vue 3.2 起，reactive 数组已增强对索引设置的支持，但需满足两个前提：
- 赋值索引必须 小于当前数组长度（即不能新增索引位，只能改已有项）；
- 数组本身必须是
reactive创建的原始代理对象，不能是解构、拷贝或中途替换过的引用。
✅ 有效：const list = reactive([1, 2, 3]); list[1] = 99; → 触发更新
❌ 无效：list[5] = 100;（越界，不触发）或 list = [4, 5, 6];（替换引用，丢失响应性）
length 修改始终不被拦截，应避免直接操作
无论 Vue 版本如何，arr.length = N 都不是推荐做法，因为：
- 它不触发响应式更新（即使在 3.2+）；
- 可能意外截断数据且无通知；
- 破坏 DOM 复用逻辑，导致列表闪烁或状态丢失。
✅ 替代方案：
• 清空数组 → arr.splice(0) 或 arr.length = 0; arr.push(...[])（后半步补触发）
• 重置为新内容 → arr.splice(0, arr.length, ...newData)
最稳妥、全版本兼容的操作方式
不依赖版本特性，统一使用 Vue 封装的变异方法，它们始终被 Proxy 拦截并触发更新：
-
push()/pop()/shift()/unshift() -
splice(index, deleteCount, ...items)—— 增、删、改都靠它，最灵活 -
sort()/reverse()
例如按索引更新某一项：arr.splice(i, 1, newValue)；替换整个列表：arr.splice(0, arr.length, ...newArray)。
