【antd-vue 4.x transfer 穿梭框40w条数据全选卡死优化】

Ant Design Vue 4.x 版本穿梭框大数据下全选时卡死排查优化

10w条数据时点击右边全选框，出现卡死现象。

1. 下载并运行antdv源码，使用for循环模拟10w条数据在穿梭框中，从右往左点击全选。
   
2. 通过浏览器性能分析记录，可以看到js代码执行花了31218毫秒，大约31秒。
   
3. 排查：
   
4. 在transfer的源码中发现

...filter(....indexOf())  这儿存在问题，可能会导致双重for循环操作

打印执行时间看，这里确实存在问题。

5. 优化使用for 循环 + map 解决此类问题

// 优化测试代码 使用此代码替换途中watch
    watch(
      () => props.selectedKeys,
      () => {
        const sKeys = props.selectedKeys || [];
        const tkeys = props.targetKeys || [];
        const sourceKeys = [];
        const targetKeys = [];
        const map = {};

        for (const key of tkeys) {
          map[key] = key;
        }

        for (const key of sKeys) {
          const hasKey = map[key];

          if (hasKey) {
            targetKeys.push(key);
          } else {
            sourceKeys.push(key);
          }
        }

        sourceSelectedKeys.value = sourceKeys;
        targetSelectedKeys.value = targetKeys;
        // sourceSelectedKeys.value =
        //   props.selectedKeys?.filter(key => props.targetKeys.indexOf(key) === -1) || [];
        // targetSelectedKeys.value =
        //   props.selectedKeys?.filter(key => props.targetKeys.indexOf(key) > -1) || [];
      },
      { immediate: true },
    );

6. 优化后 10w 40w全选数据如下图
   
   

• 操作40w 条数据内存占用
  

7. 把更改后的组件集成到项目中，替换原有的组件（这里就不描述了，欢迎私信讨论）。

8. 优化完成，还有许多不足，欢迎讨论。