vue之復雜對象結構的響應，如map對象

使用場景:

全局vue的data里面

progressBarLists: new Map(), //實車進度條數據數組

點擊左邊列表

let mapValue = {
        qd: info.qd,
        zd: info.zd,
        pars: 0
      };
      this.progressBarLists.set(info.dlid, mapValue);

watch的socket的實車數據

carGPSData() {
      if (this.focusGroup) {
        this.carGPSData.forEach(carInfo => {
          const gcj02coord = coordtransform.wgs84togcj02(carInfo.longitude, carInfo.latitude);
          this.gsLine.forEach(item => {
            if (carInfo.dlid == item.dlid) {
              let coods = [];
              let coodsAttr = {
                carNumber: carInfo.cph,
                velocity: carInfo.speed
              };
              coods[0] = gcj02coord[1];
              coods[1] = gcj02coord[0];
              item.value.realTrack(coods, coodsAttr);
              let jdt = item.value.getProgress();
              jdt = parseInt(jdt * 100);
              let mapValue = {
                qd: item.qd,
                zd: item.zd,
                pars: jdt
              };
              this.progressBarLists.set(item.dlid, mapValue);
              this.$forceUpdate();
            }
          });
          this.videoSocket.send(
            JSON.stringify({
              channel: 'BINDRESOURCE',
              dlid: this.focusGroup.dlid,
              lat: gcj02coord[1],
              lon: gcj02coord[0],
              tzid: this.focusGroup.id
            })
          );
        });
      }
    },

視圖層去遍歷map對象

    <div v-if="focusGroup">
      <div v-if="progressBarState">
        <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
          <div class="carController2" :class="{leftController:!groupListStatus}">
            <div v-for="(value,key) in progressBarLists" :key=key>
              <div class="carController2_cont">
                <div class="carController2_cont-w"> {{value[1].qd}}</div>
                <progressBar :carLineLength="value[1].pars" />
                <div class="carController2_cont-w"> {{value[1].zd}}</div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>

里面的坑，

第一點>.v-for首先不支持map對象的遍歷，得自己在map對象的value里面去封裝一個array先,

其次，v-for遍歷出來的map對象的[0]是key值，[1]才是value,

第三點>watch里面的map對象一直在改變，vue視圖里面的map對象數據不變，試了各種方式解決,最后在watch里面用了

this.$forceUpdate();解決

第四點>map對象的遍歷刪除

for (let [key, val] of _this.progressBarLists) {
              let element = _this.progressBarLists;
              if (key == item.dlid) {
                element.delete(key);
              }
            }

 

總結:map對象的key值存id,value存的需要的值得數組對象,為了做到，點擊列表1，我會生成一個列表1的一一對應的數據，點擊列表2，我會生成一個列表2的一一對應的數據，然后再點擊列表1,這個map對象的length永遠不會增加，不會像數組push那樣,

只會做值得替換