vue中Map对象使用总结

vue中Map对象使用总结

一般情况下List已经可以处理大部分情况下的业务，但在特殊的场景下，使用map可以节省很多的代码量，但在实践过程中如果套用list的方法去使用则会遇到很多的坑，这里对在Vue中正确使用map对象做一个整理，顺便吐槽下现在网上的文章真是质量低下，很多连js中list和map是啥就可以出来瞎写真的是误人子弟。

map的基本使用

//1.新建
var mapObject=new Map()
//2.添加
mapObject.set(key,value)
//如果对应的key已经存在，则会覆盖
//3.遍历
mapObject.foreach((value,key,map)=>{})
//注意这里的value,key的顺序，value在前，key在后

map在vue中的使用

1.v-for遍历问题

首先v-for是可以遍历map的，网上有人说官方页面说不支持，但实际使用是可以的，但使用方法和我们使用list是不一样的，具体使用方法

<el-row v-for="(value, key) in taskMap" :key="key">
                    <el-col :span="10">{{value[0]}}</el-col>
                    <el-col :span="14">
                        {{value[1].process}}
                    </el-col>
</el-row>

说明:

• 这里的key不是我们想象的map中的key-value中的key，而是map中的序号
• 要相取到map中的具体的值还要对value进行处理，这里实际上是一个对象数组，对象的[0]就是key，[1]就是value

2.map更新后视图不能及时更新的问题

比如，mapObject对象中已经存在(‘jay’,23)这条记录，我们此时对其进行更新set(‘jay’,48)后，map中的内容已经得到更新，但vue并不认为mapObject进行了更新，所以此时的页面不会进行数据刷新，相应的view也不会有变化，这里就需要我们主动通知vue数据已经更新要刷新页面，所以中需要在你set的代码后面加上

 this.$forceUpdate();

最近项目驱动，在不停的学习实践，强化知识，以上都是实践中的记录，也许没有深入研究，但都是经过项目检验的，可放心服用，大佬勿喷！欢迎关注！