vue Map的用法以及map更新后不重新渲染页面问题

一、set(添加)

//myMap.set(key, value);
//若是同一个键被赋值了多次,后面的会覆盖之前的值
var myMap = new Map(); //创建map对象
1. 添加数据
myMap.set(keyString, "和键'a string'关联的值");
2.循环添加数据
for (var i = 0; i < this.tableData.length; i++) {
   let n = this.tableData4[i].Id + '-' + this.tableData4[i].name
   this.myMap .set(n, this.tableData[i].bdwant)
}
3.添加对象（添加同一个keystring，不同对象的话直接更新后者）
myMap.set(keyString, {name："和键'a string'关联的值"});

二、get（查找）

this.myMap .get(keyString)

三、has(返回是否存在)

//返回值:布尔值,若存在于Map中,则返回true
myMap.has(arr) //true

四、delete(删除)

myMap.delete(key);

五、clear(清除所有)

map.clear()

六、key与valus

var map = new Map()
    .set('aa',11)
    .set('bb',22)
for(let key of map.keys()){
    console.log(key)
}
//aa
//bb

for(let value of map.values()){
    console.log(value)
}
//11
//22

//普通js写 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
//箭头函数写： 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach((value, key) => {
	console.log(key + " = " + value);
});

七、map的合并、转换

// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);
//map转数组
例：
 var map = new Map()
    .set('aa',11)
    .set('bb',22)
    .set('cc',33)
    
    1. [...map] // [ ['aa',11],['bb',22],['cc',33] ]
    2.[...map.keys()] //  ["aa", "bb", "cc"]
    3.[...map.values()] // [11, 22, 33]
    4.Array.from(this.mapbasicList.values())

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
map更新后不重新渲染页面问题

<el-row :gutter="12">
      <el-col class="m10-right1" :span="8" v-for="items in baseList2" :key="items.id">
     </el-col>
</el-row>

data () {
    return {
      myMapChangeTrucher：0,
      mapbasicList:new Map(),//存放基站基本信息的map
    };
},
  methods: {
    getBaseData(ret){
      this.mapbasicList.set(ret.baseId,ret)
      this.myMapChangeTrucher+=1  //改变参数
    },
  }
computed:{
     //使用计算属性将map装换为显示的列表
     baseList2() {
      var x=this.myMapChangeTrucher //监听到参数的变化  并改变map
      return Array.from(this.mapbasicList.values())
    }
  }

（升级：同上只需要在计算属性中添加一些代码）当有两个map，key相同，需要组合一起使用时：

computed:{
     //使用计算属性将map装换为显示的列表
     baseList2() {
      var x=this.myMapChangeTrucher //监听到参数的变化  并改变map
      var arr=[] //返回列表的数组
      this.mapstateList.forEach(element => {
        element.online=this.mapOnline.get(element.bsid) //将在线不在线的数据循环添加到map的新字段中
        arr.push(element)
      });
      return arr
      // return Array.from(this.mapbasicList.values())
    }
  }