当前位置：首页 > news >正文

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

news 来源：原创 2025/6/19 10:22:58

在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>

关键点说明：

类型定义：

复制

下载

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

合并列表：

ts

复制

下载
```
[...list1.value, ...list2.value]
```
使用扩展运算符快速合并两个响应式数组

排序实现：

复制

下载

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

响应式处理：
- 使用 computed 自动响应源列表变化
- 当 list1 或 list2 内容变化时，mergedList 自动更新

自定义排序场景

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

复制

下载

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);});
});