vue3在setup中如何将每次搜索出的数据合并到一起并去除重复部分形成历史数据并展示

您可以使用Vue3中的reactive函数将历史数据设置为响应式对象，并在每次搜索出新数据时，使用JavaScript中的concat()方法将新数据与历史数据合并，并使用Set对象去除重复部分。然后，您可以将最终的历史数据展示在页面上。

以下是一个示例代码：

import { reactive } from 'vue';

export default {
  setup() {
    const historyData = reactive([]); // 历史数据

    const search = (keyword) => {
      // 模拟搜索出的数据
      const searchData = [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
        { id: 4, name: 'apple' }, // 重复数据
      ];

      // 合并历史数据和新数据并去重
      const mergedData = [...historyData, ...searchData];
      const uniqueData = [...new Set(mergedData.map((item) => item.id))].map((id) =>
        mergedData.find((item) => item.id === id)
      );

      // 更新历史数据
      historyData.splice(0, historyData.length, ...uniqueData);
    };

    return {
      historyData,
      search,
    };
  },
};

在上面的示例中，我们首先使用reactive函数创建一个响应式的历史数据数组。然后，在每次搜索出新数据时，我们使用concat()方法将新数据与历史数据合并，并使用Set对象去除重复部分。最后，我们使用splice()方法将更新后的历史数据数组覆盖原来的数组，以便将其更新到页面上。

在模板中，您可以使用v-for指令遍历历史数据数组，并将其展示在页面上：

<template>
  <div>
    <input type="text" v-model="keyword" />
    <button @click="search(keyword)">Search</button>

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

在上面的示例中，我们首先使用v-model指令将输入框的值绑定到keyword变量上。然后，在点击搜索按钮时，我们调用search方法并传入keyword参数进行搜索。最后，我们使用v-for指令遍历历史数据数组，并使用:key指令设置每个列表项的唯一标识。