Vue 3 中 ref 数组排序需重新赋值 .value 才能触发更新，直接修改索引或对象属性无效；对象须用 reactive 包裹或整体替换确保响应式；拖拽排序应通过 splice 构造新数组再赋值。
在 Vue 3 表格排序中，用 ref 管理列表数据时，若直接修改数组内部项（如 `list.value[i].order = newIndex`）或使用非响应式方式重排，视图不会更新——因为 ref 包裹的数组本身是响应式的，但 Vue 无法侦测到对数组**索引位置**或**对象属性**的直接赋值变更（尤其当原对象未被 reactive 包裹时）。
确保 ref 数组整体响应式更新
对 ref 包裹的数组做排序操作，必须触发其 .value 的重新赋值，让 Vue 捕获变化：
- 用
Array.prototype.sort()后，显式重新赋值：list.value = [...list.value].sort(...) - 避免原地修改：
list.value.sort(...)不保证响应式更新（尤其在 shallowRef 或未开启 proxy 深度监听时） - 若排序逻辑复杂（如拖拽交换），推荐用
splice+splice或toSpliced（ES2023）构造新数组再赋值
对象字段也要响应式，否则排序后显示不更新
如果表格每行是普通对象（如 { id: 1, name: 'A' }），仅用 ref([{...}]) 是不够的——ref 对对象只做浅层响应式，修改 row.name 不会触发更新。正确做法有两种：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
方案一（推荐）：用
reactive管理整个列表，或用ref包裹后，对每个对象也用reactive初始化 -
方案二：保持
ref，但在排序后通过.value整体替换，并确保对象属性变更走响应式路径（例如用Object.assign(reactiveObj, newData)）
拖拽排序中 ref 的典型安全写法
结合 HTML5 拖放事件，用 ref 实现拖拽排序时，关键是要「交换位置」而非「改属性」：
立即学习“前端免费学习笔记（深入）”；
- 记录拖拽起始索引
dragIndex和目标索引dropIndex - 创建新数组副本：
const newList = [...list.value] - 用
splice移动元素：const [moved] = newList.splice(dragIndex, 1); newList.splice(dropIndex, 0, moved) - 最终赋值：
list.value = newList—— 这一步触发响应式更新
避免常见陷阱
以下写法会导致排序后界面卡住或状态不一致：
-
list.value[dragIndex] = list.value[dropIndex]（直接改索引，不触发响应） - 用
JSON.parse(JSON.stringify(...))深拷贝后赋值——丢失响应式引用 - 在
computed或watch中对ref数组做排序但没 return 新数组 - 把
ref列表解构为普通变量（如const { list } = props），再操作——失去响应性
