Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data

<template>
  <Transfer v-model="value" :data="data"></Transfer>
</template>

<script>
import Transfer from '../common/transfer'
export default {
  components:{
    Transfer:Transfer
  },
 //Omitted</script>

updateAllChecked() {
      /*
        Source code this.checkableData is an array of objects. What we need is the key in each object.
        So checkableDataKeys stores the array of key of the object, which means the collection of 'items that can be selected by clicking'*/
      let start = new Date().getTime();
      const checkableDataKeys = this.checkableData.map(
        item => item[this.keyProp]
      );

      this.allChecked =
        checkableDataKeys.length > 0 &&
      /*
        There has been no change since 2.4.0. I have to say that the development team is really busy. this.checked stores the array of items selected by the user by clicking on the item.
        If this.checked exists for every item in checkableDataKeys, then allChecked is true, but if any item does not exist, it is false. allChecked represents whether all are selected.
        The time complexity here is n^2, which is rubbish*/
      checkableDataKeys.every(item => this.checked.indexOf(item) > -1);
      console.log("updateAllCheckedEnd", new Date().getTime() - start);

    },

updateAllChecked() {
      /*
        Modification Here is the algorithm for constructing element objects in an efficient array containing elements of another array*/
      let start = new Date().getTime();
      let checkableDataKeys = this.checkableData.map((item) => {
        let keyProps = {};
        keyProps[item[this.keyProp]] = true;
        return keyProps;
      });
      // Use the object's kv correspondence, n(1) to find out whether an element exists in the array this.allChecked =
        checkableDataKeys.length > 0 &&
        this.checked.length > 0 &&
        this.checked.every((item) => checkableDataKeys[item]);
      // The commented source code above is the most time-consuming, so just keep looking at the time consumption console.log("updateAllCheckedEnd", new Date().getTime() - start);
    },

addToRight() {
      let currentValue = this.value.slice();
      const itemsToBeMoved = [];
      const key = this.props.key;
      let start = new Date().getTime();
      // There are two loops here, which takes a long time this.data.forEach((item) => {
        const itemKey = item[key];
        if (
          this.leftChecked.indexOf(itemKey) > -1 &&
          this.value.indexOf(itemKey) === -1
        ) {
          itemsToBeMoved.push(itemKey);
        }
      });
      console.log("addToRightEnd", new Date().getTime() - start);

      currentValue =
        this.targetOrder === "unshift"
          ? itemsToBeMoved.concat(currentValue)
          : currentValue.concat(itemsToBeMoved);
      this.$emit("input", currentValue);
      this.$emit("change", currentValue, "right", this.leftChecked);
    },

addToRight() {
      let start = new Date().getTime();
      let currentValue = this.value.slice();
      const itemsToBeMoved = [];
      const key = this.props.key;

      // Modify let leftCheckedKeyPropsObj = {};
      this.leftChecked.forEach((item, index) => {
        leftCheckedKeyPropsObj[item] = true;
      });

      let valueKeyPropsObj = {};
      this.value.forEach((item, index) => {
        valueKeyPropsObj[item] = true;
      });
      this.data.forEach((item) => {
        const itemKey = item[key];
        if ( leftCheckedKeyPropsObj[itemKey] && !valueKeyPropsObj[itemKey] ) {
          itemsToBeMoved.push(itemKey);
        }
      });
      console.log("addToRightEnd", new Date().getTime() - start);

      currentValue =
        this.targetOrder === "unshift"
          ? itemsToBeMoved.concat(currentValue)
          : currentValue.concat(itemsToBeMoved);
      this.$emit("input", currentValue);
      this.$emit("change", currentValue, "right", this.leftChecked);
    },