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

Question

Vue.js 的文档提到了 普通 Javascript 对象 的智能自动更改跟踪：

当您将纯 JavaScript 对象作为其数据选项传递给 Vue 实例时，Vue.js 将遍历其所有属性并使用 Object.defineProperty 将它们转换为 getter/setter。

Since Javascript’s Map and Set datatypes are designed to be used with their in-built get / set methods, how can I get Vue跟踪对 Map s 和 Set s 的内部状态的调用（以及因此的变化）？

原文由 Bryce 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

视图 3

是的，它确实。

Vue 3 文档在 Reactivity in depth 和 Basic Reactivity APIs 中涵盖了这些内容。

此外还有四种“反应”和“参考”。在使用 Vue 3 和 ES6 编码 6 个多月后，我仍在尝试找到适合我的使用模式。主要问题是，是否使用 Reactive 或 Reference 。

参考

Reference 是最简单的方法。例如，这就是 computed 返回的内容。它生成一个 JavaScript 值的响应版本，例如 Map 或 Set 。

有个问题。如果在 JavaScript 中使用 Reference ，则需要添加 .value 以取消引用该值。在模板 HTML 中使用它不需要添加。这使得 Reference 非常适合面向 UI 的事物，但对于内部编程则不那么适用。

我目前将 Ref 后缀添加到提供 Reference 的任何值或函数的名称中。这就是我。如果同时使用 Reference 和 Reactive 很容易混淆（TypeScript 会有所帮助，在这里）。

反应性

Reactive 用于类似地图的用途。可以将其初始化为：

 const rve = reactive( new Map() )

访问此类不需要 .value 。但是，似乎 Reactive 没有允许它像 Map 一样使用的枚举方法（例如 .entries() ）。因此，它似乎针对的是您知道对象键的用例。但这可能会改变。

我希望 Reactive 可以用作 ES 的 1:1 替代品 Map 。这对我来说很容易： Reactive 为 Map s 和 Reference 其余的。

我也希望名字会改变，让他们更亲近。 RMap 会很好 - 也许我会做一个（派生自 Reactive 并添加枚举方法）。

概括

Vue 3 的有力答案是“是”。

但是，开发人员指南可以更直接，清楚地说明选择 Reference 或 Reactive 的逻辑，以及例如什么。它们的运行时优缺点是，无需阅读各种博客文章。

---

编辑：我目前的倾向是 Ref ，但我尝试在代码中很早就解开反应性，导致只有一个 .value 在 computed 。

原文由 akauppi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Vue.js 不支持对 Map 和 Set 数据类型的反应性（还没有？）。

功能票 有一些讨论和解决方法（由用户“inca”）：

Vue 无法观察到 Set 和 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;
  }
}

这说明了一种使不可观察的数据具有反应性的一种 hacky 但 100% 的工作方法。尽管如此，在现实世界的情况下，我最终得到了 Sets/Maps 的序列化版本（例如，您可能希望将修改后的 sets/maps 版本存储在 localstorage 中，因此无论如何都要对其进行序列化），因此不涉及人工计数器/hacks。

原文由 Hill 发布，翻译遵循 CC BY-SA 3.0 许可协议