Vue3 + TypeScript合并两个列表到目标列表，并且进行排序，数组合并、集合合并、列表合并、list合并

在Vue 3 + TypeScript中合并并排序两个列表，可以通过以下步骤实现：

解决方案代码

vue

复制

下载

<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义列表项类型
interface ListItem {
  id: number;
  name: string;
  value: number;
}

// 原始列表数据
const list1 = ref<ListItem[]>([
  { id: 1, name: 'Item A', value: 10 },
  { id: 3, name: 'Item C', value: 30 }
]);

const list2 = ref<ListItem[]>([
  { id: 2, name: 'Item B', value: 20 },
  { id: 4, name: 'Item D', value: 5 }
]);

// 计算属性：合并列表并按value降序排序
const mergedList = computed(() => {
  return [...list1.value, ...list2.value].sort((a, b) => b.value - a.value);
});

// 可选：手动合并方法（适用于需要触发的操作）
function mergeAndSort() {
  return [...list1.value, ...list2.value].sort((a, b) => a.value - b.value);
}
</script>

<template>
  <div>
    <h3>列表1：</h3>
    <ul>
      <li v-for="item in list1" :key="item.id">
        {{ item.name }} ({{ item.value }})
      </li>
    </ul>

    <h3>列表2：</h3>
    <ul>
      <li v-for="item in list2" :key="item.id">
        {{ item.name }} ({{ item.value }})
      </li>
    </ul>

    <h3>合并排序结果（降序）：</h3>
    <ul>
      <li v-for="item in mergedList" :key="item.id">
        {{ item.name }} ({{ item.value }})
      </li>
    </ul>
  </div>
</template>

关键点说明：

1. 类型定义：

   ts

   复制

   下载

   interface ListItem {
     id: number;
     name: string;
     value: number; // 排序依据字段
   }

2. 合并列表：

   ts

   复制

   下载

   [...list1.value, ...list2.value]

   使用扩展运算符快速合并两个响应式数组

3. 排序实现：

   ts

   复制

   下载

   // 降序排序（值大的在前）
   .sort((a, b) => b.value - a.value)
   
   // 升序排序（值小的在前）
   .sort((a, b) => a.value - b.value)

4. 响应式处理：

   • 使用 computed 自动响应源列表变化

   • 当 list1 或 list2 内容变化时，mergedList 自动更新

自定义排序场景

如果需要复杂排序（如多字段排序）：

ts

复制

下载

const mergedList = computed(() => {
  return [...list1.value, ...list2.value].sort((a, b) => {
    // 第一优先级：value降序
    if (b.value !== a.value) return b.value - a.value;
    
    // 第二优先级：name字母序升序
    return a.name.localeCompare(b.name);
  });
});

注意事项：

1. 响应式更新 ：当源列表动态变化时，computed属性会自动更新视图

2. 唯一key ：模板中循环时使用唯一标识（如id）作为:key

3. 性能：对于超大列表（>1000项），考虑使用分页或虚拟滚动

4. 原始数组 ：sort()会修改原数组，使用扩展运算符[...]可避免污染源数据

此方案结合了Vue 3的响应式特性和TypeScript的类型安全，实现了高效清晰的列表合并排序操作。