Vue 3 中 ref 与 reactive 的响应式陷阱：为什么修改数组索引不触发更新？

在 Vue 3 组合式 API 里，ref 和 reactive 是最常用来定义响应式数据的两个函数。很多从 Vue 2 迁移过来的开发者习惯性地用 reactive 包裹对象或数组，然后直接通过索引赋值或者修改 length，结果发现视图纹丝不动。这个问题在列表渲染、表格编辑、动态表单等场景里特别容易踩坑：明明数据变了，控制台打印出来也是新值，但 DOM 就是不更新。根本原因在于 Vue 3 的