Vue 3 中给静态表单校验对象使用reactive是否为合适做法？

结论 #

完全静态、全程不会发生变更的对象，不需要用reactive包裹，这是多余操作。

原理说明 #

reactive的核心作用是为对象添加响应式代理，只有当你需要监听对象属性的变更、且属性变更后需要触发视图更新、侦听器回调、计算属性重计算时才有使用的必要。静态对象从头到尾没有值变化的场景，额外加响应式代理只会带来无意义的微小性能开销，没有任何实际收益。

对应最佳实践 #

• 纯静态表单校验规则直接定义为普通JS常量即可，主流Vue生态的表单组件（Element Plus、Ant Design Vue等）都可以正常识别使用静态规则，不需要响应式支持：

const rules = {
  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"
    }
  ]
}

• 只有当你有动态调整校验规则的需求时，才需要用reactive包裹规则对象：比如用户切换了业务选项后，某字段的必填规则、校验长度要同步修改，此时响应式代理可以让表单组件实时感知到规则变更并生效。
• 不要为了“符合reactive存对象的说法”强行对静态数据加响应式包裹，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者PenAndPapers