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

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

updateAllChecked() {
      /*
        源碼
        this.checkableData是對(duì)象數(shù)組  我們需要的是每個(gè)對(duì)象中的key
        所以checkableDataKeys保存著對(duì)象的key的數(shù)組 含義是'可通過(guò)點(diǎn)擊進(jìn)行選擇的item項(xiàng)'的集合
      */
      let start = new Date().getTime();
      const checkableDataKeys = this.checkableData.map(
        item => item[this.keyProp]
      );

      this.allChecked =
        checkableDataKeys.length > 0 &&
      /*
        從2.4.0到現(xiàn)在都沒(méi)改變 誒，不得不說(shuō)開(kāi)發(fā)團(tuán)隊(duì)是真的忙啊
        this.checked保存著'用戶(hù)通過(guò)點(diǎn)擊item選中的item數(shù)組'
        如果this.checked存在著checkableDataKeys的每一項(xiàng)的話(huà)，那么allChecked就是true，但凡有一項(xiàng)不存在就為false。allChecked代表是否全部選中了。
        這里的時(shí)間復(fù)雜度是n^2，狠垃圾
      */
      checkableDataKeys.every(item => this.checked.indexOf(item) > -1);
      console.log("updateAllCheckedEnd", new Date().getTime() - start);

    },

updateAllChecked() {
      /*
        修改
        這里就是高效數(shù)組中含有另一個(gè)數(shù)組的元素的算法
        構(gòu)建元素對(duì)象
      */
      let start = new Date().getTime();
      let checkableDataKeys = this.checkableData.map((item) => {
        let keyProps = {};
        keyProps[item[this.keyProp]] = true;
        return keyProps;
      });
      // 通過(guò)對(duì)象的k-v對(duì)應(yīng)，n(1)的方式尋找數(shù)組中是否存在某元素
      this.allChecked =
        checkableDataKeys.length > 0 &&
        this.checked.length > 0 &&
        this.checked.every((item) => checkableDataKeys[item]);
      // 上面被注釋的源碼是最耗時(shí)的，所有一直看耗時(shí)就可以了
      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();
      // 此處套了兩層循環(huán)，耗時(shí)長(zhǎng)
      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;

      // 修改
      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);
    },