Vue中使用Map数据结构的坑，直接set 无法触发双向数据绑定（解决方案）

原创于 2018-11-21 16:42:28 发布 · 1.5w 阅读

4 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

47 篇文章

订阅专栏

本文探讨了在项目中使用ES6的Map数据结构时遇到的视图同步问题。详细介绍了当尝试直接修改Map中已存在的条目时，由于JavaScript的引用特性，视图可能不会立即反映这些变化。文章提供了通过重新赋值而非更改引用的方式来解决此问题的方法，如使用Object.assign或[].concat进行深拷贝。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 因为想贯彻es6的使用，在项目中多多使用 es6 的特性，结果Map 的 set 方法去更新数据，视图无法同步，

故而使用重新设置的方式达到目的，类似 let obj = Object.assign({},{}) 或者 let arr = [].concat['a']

let no = server_no.toString()
let is_check = this.collated_data.get(no).is_check
this.collated_data.get(no).is_check = !is_check
// 使用Map数据结构只能这样更新
this.collated_data = new Map(this.collated_data)

重新赋值，而不是更改引用