【Vue3】Vue 3 中列表排序的优化技巧

news2025/2/21 5:10:44

在这里插入图片描述

本文将深入探讨 Vue 3 中列表排序的优化技巧，帮助提升应用的性能和响应速度。

1. 避免不必要的排序

按需排序

在实际应用中，并非每次数据更新都需要进行排序。例如，当列表数据仅在特定条件下需要排序时，可通过条件判断来避免不必要的排序操作。

<template>
  <div>
    <button @click="shouldSort = true">排序</button>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

const list = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);

const shouldSort = ref(false);

const sortedList = computed(() => {
  if (shouldSort.value) {
    return [...list.value].sort((a, b) => a.name.localeCompare(b.name));
  }
  return list.value;
});
</script>

防抖与节流

当排序操作与用户交互（如点击排序按钮）相关时，可使用防抖（Debounce）或节流（Throttle）技术来减少不必要的排序触发。以防抖为例，在用户频繁点击排序按钮时，只在最后一次点击后的一段时间后执行排序操作。

<template>
  <div>
    <button @click="debouncedSort">排序</button>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

const list = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);

const sortedList = computed(() => {
  return [...list.value].sort((a, b) => a.name.localeCompare(b.name));
});

const debouncedSort = debounce(() => {
  // 这里可以添加其他与排序相关的逻辑
}, 300);
</script>

2. 优化排序算法

选择合适的排序算法

JavaScript 数组的 sort() 方法默认使用的是不稳定的排序算法，在某些情况下可能无法满足需求。对于大型数据集，可考虑使用更高效的排序算法，如快速排序（Quick Sort）或归并排序（Merge Sort）。不过，由于 JavaScript 引擎对 sort() 方法进行了优化，在大多数情况下，直接使用 sort() 已经足够高效。

减少比较次数

在多字段排序时，可通过合理安排比较字段的顺序，减少不必要的比较次数。例如，优先比较区分度大的字段。

const sortedList = [...list].sort((a, b) => {
  if (a.category!== b.category) {
    return a.category.localeCompare(b.category);
  }
  return a.name.localeCompare(b.name);
});

3. 利用计算属性和缓存

计算属性的使用

在 Vue 3 中，计算属性（Computed Properties）会自动缓存结果，只有当依赖的数据发生变化时才会重新计算。因此，将排序逻辑封装在计算属性中可以避免不必要的重复计算。

<template>
  <div>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

const list = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);

const sortedList = computed(() => {
  return [...list.value].sort((a, b) => a.name.localeCompare(b.name));
});
</script>

手动缓存排序结果

在某些场景下，可手动缓存排序结果，避免重复排序。例如，当数据更新但排序条件未改变时，直接使用缓存的排序结果。

<template>
  <div>
    <button @click="updateData">更新数据</button>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

const list = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);

let cachedSortedList = null;
let lastSortCondition = null;

const sortedList = computed(() => {
  const currentSortCondition = 'name'; // 这里可以根据实际情况动态变化
  if (currentSortCondition === lastSortCondition && cachedSortedList) {
    return cachedSortedList;
  }
  cachedSortedList = [...list.value].sort((a, b) => a.name.localeCompare(b.name));
  lastSortCondition = currentSortCondition;
  return cachedSortedList;
});

const updateData = () => {
  list.value = [
    { id: 4, name: 'Date' },
    { id: 5, name: 'Eggplant' }
  ];
};
</script>

4. 虚拟列表与分页

虚拟列表

当列表数据量非常大时，一次性渲染所有数据会导致性能问题。虚拟列表（Virtual List）技术只渲染当前可见区域的数据，从而显著提升性能。在 Vue 3 中，可使用第三方库如 vue-virtual-scroller 来实现虚拟列表。

<template>
  <div>
    <VirtualList :items="list" :item-size="30">
      <template #item="{ item }">
        <div>{{ item.name }}</div>
      </template>
    </VirtualList>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { VirtualList } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

const list = ref([
  // 大量数据...
]);
</script>

分页

分页是另一种减少一次性渲染数据量的有效方法。通过将数据分成多个页面，每次只加载和渲染当前页面的数据。

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

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

const list = ref([
  // 大量数据...
]);

const itemsPerPage = 10;
const currentPage = ref(1);

const totalPages = computed(() => {
  return Math.ceil(list.value.length / itemsPerPage);
});

const currentPageData = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return list.value.slice(startIndex, endIndex);
});

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};
</script>