Vue是否支持Map和Set数据类型的反应性？

据我所知，Vue的反应性跟踪分配。如果您在集合上执行分配，则它应跟踪反应性，例如：

methods: {
  add(item) {
    this.mySet = new Set(this.mySet.add(item));
  }
}

这使您的代码更简洁，但存在一个明显的问题：性能。

只需根据需要选择解决方案即可：)

Vue.js不支持对Map和Set类型的数据进行响应（还可以吗？）。

该功能票有一些讨论，这项工作各地（用户“印加”）：

Vue无法观察到Sets和Maps。为了v-for在计算属性，方法，观察程序，模板表达式等中或其中使用这些属性，您需要创建此结构的可序列化副本并将其公开给Vue。这是一个幼稚的示例，它使用一个简单的计数器为Vue提供Set更新的信息：

data() {
  mySetChangeTracker: 1,
  mySet: new Set(),
},

computed: {
  mySetAsList() { 
    // By using `mySetChangeTracker` we tell Vue that this property depends on it,
    // so it gets re-evaluated whenever `mySetChangeTracker` changes
    return this.mySetChangeTracker && Array.from(this.mySet);
  },
},

methods: {
  add(item) {
    this.mySet.add(item);
    // Trigger Vue updates
    this.mySetChangeTracker += 1;
  }
}

这说明了一种有点怪异但100％有效的方法，用于使不可观察的数据具有响应性。尽管如此，在现实世界中，我最终还是获得了Sets / Maps的序列化版本（例如，您可能希望将Set / Maps的修改后的版本存储在本地存储中，从而无论如何都要对其进行序列化），因此不涉及任何人工计数器/黑客。