Vue数组响应式限制：索引赋值和length修改不触发更新，须用push/pop/shift/unshift/splice/sort/reverse等变异方法；Vue 2用Vue.set，Vue 3中reactive数组支持索引赋值（3.2+），ref需用splice或展开赋值。
Vue 的响应式系统对数组的处理有特殊限制，直接通过索引赋值（如 arr[0] = newVal）或修改 length（如 arr.length = 0）无法触发视图更新。这不是 bug，而是 JavaScript 的限制所致——Vue 无法侦测这些操作。关键在于：必须使用 Vue 能拦截的变异方法，或借助 Vue.set（Vue 2）或 ref/reactive 配合正确赋值（Vue 3）。
优先使用内置变异方法操作数组
Vue 封装了 7 个数组原型方法，调用它们会触发响应式更新：
-
push()、pop()、shift()、unshift() -
splice()（增删改都支持，最常用） -
sort()、reverse()
✅ 正确示例：this.items.push(newItem)this.items.splice(index, 1, updatedItem)（替换第 index 项）this.items.splice(0, this.items.length)（清空数组）
❌ 错误示例：this.items[0] = newItem（不触发更新）this.items.length = 0（不触发更新）
需要按索引设置时，用 Vue.set（Vue 2）或 Vue.set 替代方案（Vue 3）
当必须通过索引更新某一项（比如表格编辑后回填），不能直接赋值，需显式通知 Vue 数据变化：
• Vue 2：Vue.set(this.items, index, newValue) 或简写 this.$set(this.items, index, newValue)
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
• Vue 3（Composition API）：
若 items 是 ref([])，直接赋值 items.value[index] = newValue 仍无效；应改用 items.value = [...items.value.slice(0, index), newValue, ...items.value.slice(index + 1)]，或用 splice：items.value.splice(index, 1, newValue)
避免直接替换整个数组引用（除非有意为之）
虽然 this.items = newArray 能触发更新，但会丢失原数组的响应式连接（尤其在嵌套对象中可能引发深层响应失效），且破坏原有 DOM 复用逻辑，导致列表闪烁或状态丢失（如 input 聚焦、滚动位置）。
✅ 更稳妥的做法是复用原数组引用：this.items.splice(0, this.items.length, ...newArray)（清空并插入新项）
或 this.items.length = 0; this.items.push(...newArray)
⚠️ 注意：若数组元素是对象，且你只改了对象内部属性（如 this.items[0].name = 'xxx'），只要该对象本身是响应式的，这完全合法且会更新视图——问题只出在数组自身结构变更上。
Vue 3 中 reactive 数组的特别提醒
用 reactive([...]) 创建的数组，同样不响应索引赋值和 length 修改。但它支持 Proxy 原生能力，因此以下操作是有效的：
-
arr.push()、arr.splice()等变异方法 -
arr[index] = val—— ✅ 在 Vue 3.2+ 中已支持！（仅限reactive创建的数组，ref包裹的数组仍需用.value+splice）
不过为保持一致性与可读性，建议统一使用 splice 或展开赋值，避免混用风格。
掌握这些边界，数组更新就不再“失灵”。核心就一条：让 Vue 知道数据变了——要么走它认可的路，要么主动告诉它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
