「三年了，今晚突然开窍！」一个拖拽排序的顿悟时刻

🎓 刚毕业的我：Vue？不就是ref加v-for和v-model吗？

三年前，我拿着刚学的Vue知识，信心满满地接了一个**「多组拖拽排序+动态增删」的需求。当时吭哧吭哧写了个超复杂的嵌套对象**，每次改排序都要：

找原组、目标组
计算位置索引
递归修改数据
还要担心 Vue 响应式更新问题

代码越写越乱，维护起来想哭 😭

今晚熬夜就胡思乱想，思绪就飘到技术上想怎么用好hook，想到以为做的这个功能突然灵光一闪：「我干嘛不直接用扁平化数据 + 计算属性？」

💡 顿悟后的清爽方案

旧思路（复杂版）：

js 复制代码

groups: [
  {
    id: 'group1',
    items: [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' }
    ]
  }
]

每次移动都要 splice + push + 手动维护数据一致性，心累！

新思路（真香版）：

js 复制代码

// 数据扁平化
items: [
  { id: 1, text: 'Item 1', group: 'group1', order: 0 },
  { id: 2, text: 'Item 2', group: 'group1', order: 1 }
],
groups: [
  { id: 'group1', name: 'Group 1', order: 0 }
]

// 计算属性自动分组+排序
computed: {
  groupedItems() {
    return this.groups
      .sort((a, b) => a.order - b.order)
      .map(group => ({
        ...group,
        items: this.items
          .filter(item => item.group === group.id)
          .sort((a, b) => a.order - b.order)
      }))
  }
}

现在只需要：

移动项目？ → 改 item.group + order
组排序？ → 改 group.order
增删？ → 直接操作数组，不用递归

代码少了一半，逻辑清晰十倍！

🤯 为什么现在才想通？

经验不够 ：三年前刚用 Vue，总想着「操作 DOM 思维」，没吃透数据驱动的精髓
被复杂需求唬住 ：觉得「嵌套数据才符合业务」，其实扁平化+计算属性更香
没踩够坑：只有被复杂代码折磨过，才会真正渴望简洁方案

🎯 总结 & 建议

✅ 数据驱动 > 手动 DOM 操作 （Vue/React 的精髓）

✅ 扁平化数据结构 + 计算属性 = 维护轻松

✅ 排序用 order 比数组 index 更可控

✅ 写代码不是「能跑就行」，而是「容易改」

「三年了，今晚突然开窍！」 一个拖拽排序的顿悟时刻

🎓 刚毕业的我：Vue？不就是ref加v-for和v-model吗？

💡 顿悟后的清爽方案

🤯 为什么现在才想通？

🎯 总结 & 建议

「三年了，今晚突然开窍！」一个拖拽排序的顿悟时刻