【VUE3】Vue 3 中列表排序：单字段与多字段排序实现方案

在前端开发中，对数据列表进行排序是一个常见的需求。在 Vue 3 里，我们可以方便地实现根据单个字段或者多个字段对列表进行排序。本文将深入探讨如何在 Vue 3 中完成这些排序操作，涵盖组合式 API 和选项式 API 两种实现方式，并详细解释其中的原理。

单字段排序

原理

单字段排序的核心是使用 JavaScript 数组的 sort 方法。sort 方法接受一个比较函数作为参数，通过比较函数的返回值来确定元素的顺序。比较函数接收两个参数，通常表示为 a 和 b，如果返回值小于 0，则 a 排在 b 前面；如果返回值大于 0，则 a 排在 b 后面；如果返回值等于 0，则元素顺序不变。

组合式 API 实现

<template>
  <div>
    <button @click="sortByAgeAsc">按年龄升序排序</button>
    <button @click="sortByAgeDesc">按年龄降序排序</button>
    <ul>
      <li v-for="person in sortedList" :key="person.id">
        {
  { person.name }} - {
  { person.age }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: '