Vue3 中使用 Set 数据结构标记对象集合中的重复值

在 Vue3 中，可以使用 'reactive' 函数将一个对象转换为响应式对象，然后使用 'Set' 数据结构来存储唯一的值。

下面是一个示例代码：

import { reactive } from 'vue';

const data = reactive({
  items: new Set(),
});

function addValue(value) {
  data.items.add(value);
}

function removeValue(value) {
  data.items.delete(value);
}

console.log(data.items); // 输出 Set(0) {}

addValue(1);
addValue(2);
addValue(1);

console.log(data.items); // 输出 Set(2) {1, 2}

removeValue(2);

console.log(data.items); // 输出 Set(1) {1}

在上面的示例中，我们使用 'reactive' 函数将 'data' 对象转换为响应式对象，并在 'data' 对象中创建了一个名为 'items' 的 'Set' 实例来存储唯一的值。

然后，我们定义了 'addValue' 和 'removeValue' 函数来向 'items' 集合中添加或删除值。

在示例代码中，我们先将值 1 和 2 添加到 'items' 集合中，然后尝试再次添加值 1。由于 Set 数据结构只能存储唯一的值，所以重复的值 1 不会被添加到集合中。

最后，我们从 'items' 集合中删除值 2。

通过使用 'Set' 数据结构，我们可以方便地存储和操作唯一的值，并且 Vue3 的响应式系统可以自动追踪集合中的变化。