转载说明：原创不易，未经授权，谢绝任何形式的转载

有时候，我们想在Vue.js中将JavaScript的map和set作为响应式属性使用。

在本文中，我们将讨论如何在Vue.js中将JavaScript的Map和Set作为响应式属性使用。

在 Vue.js 中使 Map 和 Set 具有响应性

我们可以通过将JavaScript的maps和sets重新赋值为新值，在Vue.js中将它们作为响应式属性使用。

为了做到这一点，我们可以这样写：

<template>
  <div id="app">
    <p>{{ mapArr }}</p>
    <p>{{ setArr }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  computed: {
    mapArr() {
      return [...this.map.entries()];
    },
    setArr() {
      return [...this.set.entries()];
    },
  },
  data() {
    return {
      map: new Map([
        ["foo", 1],
        ["bar", 2],
      ]),
      set: new Set([1, 2]),
    };
  },
  mounted() {
    this.map = new Map(this.map.set("baz", 3));
    this.set = new Set(this.set.add(3));
  },
};
</script>

我们有 map 和 set 这两个反应属性，分别设置为一个映射和一个集合。

然后我们使用 this.map.set 方法，传入要添加到地图中的键和值。

然后我们将返回的集合传递给 Map 构造函数，并将其分配给 this.map 响应式属性以进行更新。

接下来，我们调用 this.set.add 来向 this.set 添加一个新的条目。

然后我们将返回的集合传递给 Set 构造函数，并将其赋值给 this.set 以更新它。

我们分别将 setArr 和 mapArr 中的集合和映射转换为数组（计算属性 computed），并在模板上进行渲染。

我们所得到的：

[ [ "foo", 1 ], [ "bar", 2 ], [ "baz", 3 ] ]

mapArr

[ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ] ]

结束

我们可以通过将JavaScript的maps和sets重新分配给新值，在Vue.js中将它们用作响应式属性。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。