CODEWITHSUNDEEP
javascriptvue.jsvuejs2frontendvuejs3
PenAndPapers
PenAndPapers

Reputation: 2108

Vue 3 is it good to use reactive on static objects

I have a variable rules that holds an object for validating a form. From reading some blogs and watching tutorials I've learned that ref is for primitive values and reactive is for objects/arrays.

So my question is do I need to use reactive when an object is just static?

What's the best practice?

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"
        }
      ]
    });

Upvotes: 1

Views: 1416

Answers (1)

Bruno Francisco
Bruno Francisco

Reputation: 4240

From wiki

In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.

In essence theres no benefit from having a reactive property if you don't need to track its changes. In your case it looks like what you have is a constant and not a property that needs to be tracked when its changed or not.

Rule of thumb:

Do I need to track changes to this variable?

  • if yes, then it probably should be reactive
  • if no, then just store it in an immutable variable (using const for example)

You can also combine Object.freeze here if you would like to prevent other people from modifying such objects:

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"
        }
      ]
    });

Upvotes: 1

Related Questions