Vue数组响应式受限于JavaScript引擎限制，无法监听索引赋值和length修改，故需用7个变异方法或$set/splice等替代方案。
Vue 的响应式系统对数组的处理不是“加了额外功能”，而是被迫绕开 JavaScript 本身的限制。它无法自动监听索引赋值（arr[0] = x）或 length 修改（arr.length = 0），所以必须用特定方式操作，否则视图不会更新。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
为什么数组不能像对象一样被直接监听
Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy，但二者都做不到：
• 下标访问和赋值（如 arr[2] = 'new'）不触发 set 拦截
• 修改 length 属性（如 arr.length = 1）属于属性写入，但原生数组的 length 是不可配置/不可枚举的，Proxy 也无法可靠捕获这类副作用
• 这些是 JavaScript 引擎层面的限制，并非 Vue 实现不到位
必须使用的 7 个变异方法
Vue 显式重写了这些数组原型方法，调用它们会触发依赖通知和视图更新：
• push()、pop() —— 尾部增删
• unshift()、shift() —— 头部增删
• splice() —— 最灵活，支持删除、插入、替换（如 arr.splice(i, 1, newItem)）
• sort()、reverse() —— 顺序变更也会触发更新
需要按索引更新时的正确做法
当必须改某一项（比如表格编辑回填），不能直接写 arr[i] = val：
• Vue 2：用 this.$set(arr, i, val) 或 Vue.set(arr, i, val)
• Vue 3（ref）：避免 arr.value[i] = val，改用 arr.value.splice(i, 1, val) 或展开赋值 arr.value = [...arr.value.slice(0, i), val, ...arr.value.slice(i + 1)]
• Vue 3（reactive 数组，v3.2+）：支持直接索引赋值 arr[i] = val，但仅限 reactive 创建的数组，ref 不适用
避免直接替换整个数组引用
虽然 this.items = newArray 能更新视图，但有隐患：
• 原数组的响应式连接中断，若其中含嵌套响应式对象，深层响应可能失效
• DOM 复用被破坏，列表项状态（如 input 聚焦、滚动位置、过渡动画）容易丢失
• 更稳妥的方式是复用原引用：this.items.splice(0, this.items.length, ...newArray) 或 this.items.length = 0; this.items.push(...newArray)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
