vue js 实现排序

使用 Vue.js 实现排序

基于计算属性排序

通过计算属性对数组进行排序，适用于静态数据或需要响应式更新的场景。
在 Vue 组件的 data 中定义原始数组，通过 computed 返回排序后的结果。

data() {
  return {
    items: [5, 2, 8, 1, 4]
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => a - b);
  }
}

使用方法触发排序

通过方法动态排序，适合需要用户交互（如点击按钮）的场景。
在 methods 中定义排序逻辑，直接修改原数组或返回新数组。

methods: {
  sortAscending() {
    this.items.sort((a, b) => a - b);
  },
  sortDescending() {
    this.items.sort((a, b) => b - a);
  }
}

对象数组按属性排序

当数组元素为对象时，可通过指定属性名排序。
以下示例按 age 属性升序排列：

data() {
  return {
    users: [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 20 }
    ]
  }
},
computed: {
  sortedUsers() {
    return [...this.users].sort((a, b) => a.age - b.age);
  }
}

结合 v-for 渲染排序结果

在模板中使用 v-for 绑定排序后的数组：

<ul>
  <li v-for="item in sortedItems" :key="item">
    {{ item }}
  </li>
</ul>

动态切换排序方向

通过变量存储当前排序状态，实现升序/降序切换：

data() {
  return {
    sortDirection: 1 // 1为升序，-1为降序
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => (a - b) * this.sortDirection);
  }
},
methods: {
  toggleSort() {
    this.sortDirection *= -1;
  }
}

使用 Lodash 进行复杂排序

对于多条件排序，可引入 Lodash 的 orderBy 函数：

import _ from 'lodash';

computed: {
  sortedUsers() {
    return _.orderBy(this.users, ['age', 'name'], ['asc', 'desc']);
  }
}

注意事项

• 直接调用 sort() 会修改原数组，若需保留原数组，应先创建副本（如 [...array]）。
• 对于大型数据集，考虑使用分页或虚拟滚动优化性能。