在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的類型安全，實現了高效清晰的列表合并排序操作。