Vue 3 表格排序需避免修改原始响应式数组、用 computed 隔离排序逻辑、视图只消费派生数据；排序时用扩展运算符创建副本再 sort，多字段按优先级分层比较，并用 ref 管理动态 sortKey/sortOrder。
在 Vue 3 中实现表格排序时保持响应式数据一致，核心不是“手动同步”，而是**避免直接修改原始响应式数组、用计算属性隔离排序逻辑、确保所有视图只消费派生数据**。只要这三点做到位，数据一致性自然成立，不会出现界面卡顿、排序失效或状态错乱。
用 computed 包裹排序逻辑，不改原始数据
原始数据（如 ref 或 reactive 声明的数组）应始终作为唯一数据源，只读不写。排序结果通过 computed 生成新数组：
- 使用扩展运算符
[...data]或Array.from(data)创建副本，再调用.sort() - 禁止对
data.value.sort()或data.sort()直接调用——这会污染原始响应式数组，破坏响应式依赖链 - 示例：
const sortedData = computed(() => [...tableData.value].sort((a, b) => a.status - b.status))
多字段排序时按优先级分层判断
单一 a[key] - b[key] 只适用于数字字段且无相等情况。真实业务中常需组合条件（如 status 优先，status 相同时按 level 或时间倒序）：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 第一级：若
a.status !== b.status，直接返回a.status - b.status（0 在前） - 第二级：若 status 相同，再比
b.level - a.level（假设 level 越大越重要） - 第三级（兜底）：加
a.id - b.id避免排序不稳定（尤其使用 Proxy 代理时）
动态排序状态要精准控制 defaultSort 和触发时机
Element Plus 等组件的 default-sort 属性是初始化用的，它不会随数据变化自动更新。若需点击表头切换排序，必须：
立即学习“前端免费学习笔记（深入）”；
- 用
ref管理当前排序字段sortKey和顺序sortOrder - 每次点击触发后，清除旧排序状态（如重置
el-table的内部排序标记），再设置新值 - 确保
computed排序函数完整接收并使用这两个响应式变量，而非硬编码
注意数组变更的响应式边界
Vue 3 的 reactive 对数组长度变化和索引赋值（如 arr[0] = newItem）是响应式的，但以下操作不会触发更新：
-
arr.push()、arr.pop()等原生方法 ✅ 是响应式的（Proxy 已拦截） -
arr.length = 0❌ 不触发更新，应改用arr.splice(0)或arr.length = 0; arr = [...arr] - 直接通过索引设值如
arr[5] = item✅ 有效，但前提是该索引原本存在或已预设（否则需用Vue.set类似逻辑 —— 实际应避免，改用splice或替换整个数组）
