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那样,

只会做值得替换

 

转载于:https://www.cnblogs.com/lsc-boke/p/11230646.html