Vue 3 在静态对象上使用响应式是否很好答案

【问题标题】：Vue 3 is it good to use reactive on static objectsVue 3 在静态对象上使用响应式是否很好
【发布时间】：2021-07-01 06:15:28
【问题描述】：

我有一个变量rules，其中包含一个用于验证表单的对象。通过阅读一些博客和观看教程，我了解到 ref 用于原始值，而 reactive 用于对象/数组。

所以我的问题是当对象只是静态时我需要使用反应式吗？

最佳做法是什么？

const rules = reactive({
      name: [
        {
          required: true,
          message: "Name is required"
          trigger: "blur"
        }
      ],
      age: [
        {
          required: true,
          message: "Age is required",
          trigger: "blur"
        }
      ],
      email: [
        {
          required: true,
          message: "Email is required",
          trigger: "blur"
        }
      ]
    });

【问题讨论】：

这是一个常数，对吧？您不需要 ref 或响应式。直接使用对象即可。
是的，它是一个常数。当对象不变时使用响应式有什么缺点？
很明显你不明白reactive做了什么。我谦虚地建议你找出（希望是从官方 Vue.js 文档中）而不是从随机的人那里寻求更多预先考虑过的答案。
@PenAndPapers 与此问题无关：我已经创建了关于您几分钟前提出的问题的答案，该问题已被删除。我认为这是一个很好的问题，所以我回答了它。在jsfiddle.net/9naj6mcu 上查看工作答案。

标签： javascript vue.js vuejs2 frontend vuejs3

【解决方案1】：

来自wiki

在计算中，反应式编程是一种声明式编程范式，涉及数据流和变化的传播。

本质上，如果您不需要跟踪其更改，则拥有响应式属性没有任何好处。在您的情况下，您所拥有的似乎是一个常量，而不是一个需要在其更改与否时进行跟踪的属性。

经验法则：

我需要跟踪这个变量的变化吗？

如果是，那么它可能应该是反应式的
如果否，则将其存储在不可变变量中（例如使用const）

如果您想防止其他人修改此类对象，也可以在此处组合Object.freeze：

const rules = Object.freeze({
      name: [
        {
          required: true,
          message: "Name is required"
          trigger: "blur"
        }
      ],
      age: [
        {
          required: true,
          message: "Age is required",
          trigger: "blur"
        }
      ],
      email: [
        {
          required: true,
          message: "Email is required",
          trigger: "blur"
        }
      ]
    });

【讨论】：

const 不会使对象不可变，而是使变量不可变。
除了reactive(…)，您还可以跟踪reactive返回的对象属性的变化。返回的对象肯定也可以存储在const 变量中。 const rules = reactive( … ) 完全有效，通常是您想要的。