vue实现数组排序

使用 Vue 实现数组排序

Vue 中可以通过计算属性或方法对数组进行排序，结合响应式特性实现动态排序效果。以下是几种常见方法：

计算属性排序

利用计算属性返回排序后的数组，适用于依赖响应式数据的场景：

data() {
  return {
    numbers: [3, 1, 4, 2, 5]
  }
},
computed: {
  sortedNumbers() {
    return [...this.numbers].sort((a, b) => a - b)
  }
}

模板中使用 sortedNumbers 即可显示升序结果。注意通过 [...this.numbers] 创建副本避免修改原数组。

方法排序

通过方法触发排序，适合需要手动控制的场景：

methods: {
  sortArray() {
    this.numbers.sort((a, b) => a - b)
  }
}

调用 sortArray() 会直接修改原数组，Vue 的响应式系统会自动更新视图。

对象数组排序

对对象数组按属性排序时，需指定比较逻辑：

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

双向排序

通过变量控制排序方向：

data() {
  return {
    sortDirection: 1 // 1升序，-1降序
  }
},
methods: {
  toggleSort() {
    this.sortDirection *= -1
    this.numbers.sort((a, b) => (a - b) * this.sortDirection)
  }
}

注意事项

1. 直接调用 sort() 会修改原数组，需用展开运算符创建副本
2. 对大型数组考虑使用 lodash.sortBy 等工具库优化性能
3. 在 v-for 中建议使用计算属性而非直接排序方法