vue 3 的 reactive 对数组本身完全响应，但直接索引赋值（如 arr[0] = val）或修改 length 不触发更新；应使用 push、splice 等内置方法或嵌套响应式对象。
Vue 3 的 reactive 对数组本身是完全响应的，但常见“更新了数组、视图却不刷新”的问题，往往不是 reactive 失效，而是你用了非响应式操作方式（比如直接通过索引赋值或修改 length），或者没触发 Vue 的追踪机制。
✅ 数组哪些操作是响应式的？
Vue 3 基于 Proxy 实现响应式，对数组做了专门增强，以下操作会自动触发视图更新：
-
使用内置方法：如
push()、pop()、shift()、unshift()、splice()、sort()、reverse() -
用
ref包裹后重新赋值（适合替换整个数组）：list.value = newList -
用
reactive包裹后，用splice替换某一项：arr.splice(index, 1, newItem)
❌ 哪些操作不会触发更新？（痛点根源）
这些写法看似改变了数组，但 Vue 无法侦测，导致界面卡在旧状态：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
-
直接通过索引设置元素：
arr[0] = newValue❌ -
直接修改 length：
arr.length = 0❌ -
用
Object.assign或展开运算符“覆盖”原引用但未赋值给响应式变量本身：Object.assign(arr, [1,2,3])❌（只是改了内部，没通知 Proxy）
? 正确更新数组某一项的 3 种推荐方式
假设你有一个 reactive 数组 const list = reactive([1, 2, 3])，想把第 1 项改成 99：
-
用
splice：list.splice(1, 1, 99)✅（推荐，语义清晰，响应式） -
用
ref+ 解构赋值（适合复杂结构）：const itemRef = ref(list[1]); itemRef.value = 99—— 但前提是该项本身也是响应式对象；否则更简单的是：list[1] = 99❌ 不行，得配合nextTick+ 强制重写（不推荐） -
用
reactive包裹每一项（最佳实践）：const list = reactive([{ id: 1, name: 'a' }, { id: 2, name: 'b' }])，然后更新：list[0].name = 'new a'✅（因为对象属性是响应式）
? 小技巧：快速让索引赋值生效（不推荐长期用）
如果必须用 arr[index] = val，可借助 Vue.set 的替代方案（Vue 3 中已移除），可用：
-
arr.splice(index, 1, newValue)—— 最干净 - 或临时转成
ref：const arrRef = ref(arr); arrRef.value = [...arr]（适合批量更新后整体替换）
本质上，Vue 3 的数组响应式没有“缺陷”，只有“使用边界”。只要避开直接索引赋值和 length 修改，用好 splice 和嵌套响应式对象，列表渲染就非常稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
