Vue 是否支持 Map 和 Set 数据类型的反应性? [英] Does Vue support reactivity on Map and Set data types?

问题描述

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

The docs for Vue.js mention the smart auto-change-tracking for plain Javascript objects:

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

When you pass a plain JavaScript object to a Vue instance as its data option, Vue.js will walk through all of its properties and convert them to getter/setters using Object.defineProperty.

由于 Javascript 的 Map 和 Set 数据类型旨在与其内置的 get/set 一起使用方法，我怎样才能让 Vue 跟踪对 Maps 和 Sets 的内部状态的调用(以及更改)?

Since Javascript's Map and Set datatypes are designed to be used with their in-built get/set methods, how can I get Vue to track calls (and therefore, changes) to the internal state of Maps and Sets?

推荐答案

Vue 3

是的，确实如此.

Vue 3

Yes, it does.

Vue 3 文档在 Reactivity in depth 和 基本反应性 API.

Vue 3 docs cover these at Reactivity in depth and Basic Reactivity APIs.

有四种反应式"和参考"此外.在使用 Vue 3 和 ES6 编码 6 个多月之后，我仍在努力寻找适合我的使用模式.主要问题是，是使用Reactive 还是Reference.

There are four kinds of "reactive" and the "reference" in addition. I'm still trying to find the usage patterns that suit me, after 6+ months with Vue 3 and ES6 coding. The main question is, whether to use Reactive or Reference.

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

Reference is the easy way to go. This is what gets returned by computed, for example. It makes a reactive version of one's JavaScript value, e.g. a Map or a Set.

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

There's a gotcha. If one uses Reference in one's JavaScript, a .value needs to be added to dereference the value. Using it in template HTML does not need that addition. This makes Reference perfect for UI facing things, but less so for internal programming.

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

I currently add Ref postfix to the name of any value or function that provides a Reference. That's just me. It's easy to get confused if one uses both Reference and Reactive (TypeScript would help, here).

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

Reactive is made for Map-like use. One can initialise it as:

const rve = reactive( new Map() )

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

Accessing such does not need the .value. However, it seems Reactive does not have the enumeration methods (e.g. .entries()) that would allow it to be used Map-like. Therefore, it seems aimed at a use case where you know the keys of an object. But this may change.

我希望 Reactive 能够以 1:1 的比例替代 ES Map.这对我来说很容易:Reactive 用于 Maps，Reference 用于其余部分.

I wish Reactive was brought in the direction that it can be used as a 1:1 replacement for ES Map. This would make it easy for me: Reactive for Maps and Reference for the rest.

我也希望改名，让他们更亲近.RMap 会很好 - 也许我会做一个(从 Reactive 派生并添加枚举方法).

I would also wish the name would change, to bring them closer. RMap would be fine - maybe I'll make one (derive from Reactive and add the enumeration methods).

对于 Vue 3，强有力的回答是是".

The strong answer, with Vue 3, is "YES".

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

However, the developer guidance can be made more straightforward, clearly stating which would be the logic for picking Reference or Reactive, and what eg. their runtime pros and cons are, without needing to read various blog posts.

我目前倾向于Ref，但我尝试在代码中很早就解开反应性，导致中只有一个.value计算.

My current leaning is towards Ref, but I try to unwrap the reactivity quite early within the code, leading to just one .value within a computed.

这篇关于Vue 是否支持 Map 和 Set 数据类型的反应性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！