vue.js for排序

在Vue.js中实现排序功能，通常涉及到对数组进行排序，并将排序后的结果绑定到视图上。以下是一些基础概念、优势、类型、应用场景以及常见问题的解决方法：

基础概念

响应式数据：Vue.js的核心特性之一是数据驱动视图，即数据的改变会自动反映到视图上。
计算属性：用于处理复杂逻辑，如排序，可以缓存结果，只有依赖的数据变化时才会重新计算。
方法：可以在模板中调用的函数，适合用于事件处理或一次性操作。

优势

简洁性：Vue.js的模板语法使得数据绑定和事件处理非常直观。
灵活性：可以使用计算属性或方法来实现排序逻辑，根据需求选择最合适的方式。
性能优化：计算属性具有缓存机制，避免了不必要的重复计算。

类型

计算属性排序：适用于依赖多个数据源的复杂排序逻辑。
方法排序：适用于简单的排序或需要手动触发排序的场景。

应用场景

表格数据排序：用户点击表头对表格数据进行升序或降序排列。
列表排序：对列表项进行排序，如按时间、名称等。

示例代码

以下是一个使用Vue 3语法的示例，展示如何在表格中实现点击表头排序的功能：

<template>
  <table>
    <thead>
      <tr>
        <th @click="sort('name')">Name</th>
        <th @click="sort('age')">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in sortedPeople" :key="person.id">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const people = ref([
      { id: 1, name: 'Alice', age: 30 },
      { id: 2, name: 'Bob', age: 25 },
      // ... more people
    ]);
    const sortKey = ref('');
    const sortOrder = ref(1); // 1 for ascending, -1 for descending

    const sortedPeople = computed(() => {
      return [...people.value].sort((a, b) => {
        if (a[sortKey.value] < b[sortKey.value]) return -1 * sortOrder.value;
        if (a[sortKey.value] > b[sortKey.value]) return 1 * sortOrder.value;
        return 0;
      });
    });

    function sort(key) {
      if (sortKey.value === key) {
        sortOrder.value *= -1; // toggle sort order
      } else {
        sortKey.value = key;
        sortOrder.value = 1; // default to ascending
      }
    }

    return { sortedPeople, sort };
  }
};
</script>