vue3响应式集合移除数据

一、vant3前端tag标签组件遍历：

<van-row gutter="16" style="padding: 0 16px">
    <van-col v-for="(tag,index) in activeIds" :key="tag">
      <van-tag closeable size="medium" type="primary" @close="doClose(index,tag)">
        {{tag}}
      </van-tag>
    </van-col>
  </van-row>

二、通过方法移除响应式集合中的元素

要注意的是普通集合可以直接用函数，响应式集合要用activeIds.value获取值再调用函数

1.使用 filter 方法：

  // activeIds响应式集合
    const activeIds = ref([]);

    const doClose=(tag)=>{
      activeIds.value = activeIds.value.filter(item => {
        return item !== tag;
      })
    }

这种方式使用了 filter 方法来创建一个新的数组，其中不包含要移除的标签。然后，将新数组赋值给 activeIds.value。这种方式会创建一个新的数组对象，并重新分配给 activeIds.value，因此可能会产生一些额外的内存开销。

2.使用 splice 方法：

这个方法有两个参数（移除元素的下标，移除个数）

    const doClose=(index,tag)=> {
      activeIds.value.splice(index, 1);
    }

这种方式使用了 splice 方法直接在原始数组上进行修改，将指定索引处的元素移除。这种方式不会创建新的数组对象，因此在内存方面可能更高效一些。