Vue中useVirtualList删除元素导致相邻元素状态错误的问题如何解决？

Question

我使用了虚拟列表useVirtualList
cacheLike_list的内容会在进入软件自动从数据库获取

const cacheLike_list = ref([])
const {list, containerProps, wrapperProps} = useVirtualList(
  cacheLike_list.value,
  {
    itemHeight: 56,
    overscan: 5,
  })

我想实现一个类似收藏夹的功能，即：当取消收藏后，从收藏夹缓存移除，并从虚拟列表内移除，使其不渲染，关键代码（在循环内）：

<label class="swap">
<input ref="theme_sw" :checked="metadata.data.isLike" class="outline-none" type="checkbox"
                   @change="SwitchLikes($event,{path:metadata.data.path,index:metadata.index})"/>
<svg class="swap-off" height="16" viewBox="0 0 24 24">
  空心
</svg>
<svg class="swap-on" height="16" viewBox="0 0 24 24">
  红心
</svg>
</label>

SwitchLikes方法：

function SwitchLikes(event, args) {
  console.log('likes: ', toRaw(cacheLike_list.value[args.index]))
  db.init_DB().then(() => {
    db.deleteData(args.path, 'LikesCache')
    cacheLike_list.value[args.index].isLike = false
    db.addData(toRaw(cacheLike_list.value[args.index]))
    db.close_db()
    cacheLike_list.value.splice(args.index, 1)
    EventBus.emit('set_Like_false', args.path)
  })
}

问题：

假如现在我想移除第一首歌，正常来说点击爱心后它应该从列表中移除，但我这发生的现象是：它确实从列表中移除了，也正确的从数据库中删除了，但是在这首被取消收藏的歌的下一首歌的爱心也取消被选中了（即红心变成空心的了），检查元素，发现input状态依旧是checked：

我使用的css框架是tailwindcss，也使用了daisyUI，我猜测可能是在删除虚拟列表中数据时，下一个元素的状态被错误的设置了，或者是鼠标事件被错误的触发了，但是仍然找不到解决方法
组件链接swap

Answer 1

我感觉是 cacheLike_list.value.splice(args.index, 1) 修改了数组，这可能导致 响应式系统没有正确更新虚拟列表的渲染

function SwitchLikes(event, args) {
  console.log('likes: ', toRaw(cacheLike_list.value[args.index]));
  db.init_DB().then(() => {
    db.deleteData(args.path, 'LikesCache');

    // 更新数据响应式
    const removedItem = toRaw(cacheLike_list.value[args.index]);
    cacheLike_list.value = cacheLike_list.value.filter((_, index) => index !== args.index);

    db.addData(removedItem);
    db.close_db();

    // 强制刷新虚拟列表
    list.refresh();

    EventBus.emit('set_Like_false', args.path);
  });
}

useVirtualList 通常提供了 remove 或 refresh 方法来手动更新虚拟列表。可以在删除元素后，调用 list.refresh() 强制更新虚拟列表