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

vue.js Vue.js

神奇启人

2020-03-11

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

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

由于Javascript Map和Set数据类型被设计为与它们的内置get/ set方法一起使用，因此如何获取Vue来跟踪对Maps和Sets 内部状态的调用（以及更改）？

第669篇《Vue是否支持Map和Set数据类型的反应性？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
小小Davaid 2020.03.11

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

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

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

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

Eva猴子古一 2020.03.11

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的修改后的版本存储在本地存储中，从而无论如何都要对其进行序列化），因此不涉及任何人工计数器/黑客。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android