VUE3 对象集合标记重复值

在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的响应式系统可以自动追踪集合中的变化