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

Question

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

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

由于Javascript Map和Set数据类型旨在与其内置get/ set方法一起使用,我如何让Vue跟踪Maps和Sets 的内部状态的调用(因此,更改)？

Answer 1

Vue.js不支持反应性Map和Set数据类型(但是？).

该功能票有一些讨论,这项工作各地(用户"印加"):

Vue无法观察集和映射.为了使用它们 - 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%的工作方法,可以使不可观察的数据被反应.尽管如此,在现实世界的情况下,我最终得到了集合/映射的序列化版本(例如,您可能希望将集合/映射的修改版本存储在localstorage中,从而无论如何都将它们序列化),因此不涉及人工计数器/黑客.

Answer 2

视图 3

是的，它确实。

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

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

参考

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

有一个问题。如果Reference在自己的 JavaScript 中使用，则.value需要添加 a 以取消引用该值。在模板 HTML 中使用它不需要添加。这Reference对于面向 UI 的事物来说是完美的，但对于内部编程来说则不然。

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

反应式

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

const rve = reactive( new Map() )

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

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

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

概括

对于 Vue 3，强有力的回答是“是”。

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

编辑：我现在的斜塔是对Ref的，但我尝试在代码中很早就解开的反应，从而导致只有一个.value内computed。

Answer 3

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

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

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

只需根据您的需求选择解决方案即可：)