CODEWITHSUNDEEP
javascriptvue.js
JavaScript Bee
JavaScript Bee

Reputation: 3

Declaring a variable vs using Vue data property

I'm trying to understand if there is any significant difference between declaring a variable vs declaring a new Vue data property to assign values. (other than reusability and reactivity using Vue data property).

Example -

//Using variable
var result = "Passed";
//Using Vue data property
this.result = "Passed";

Upvotes: 0

Views: 3094

Answers (1)

jonnycraze
jonnycraze

Reputation: 498

As you stated, creating a property with a value as a data property will allow it to be tracked in Vue's reactivity system. It will make that property available in the template section of your component whereas creating a standard variable will not be available this way.

Such as:

<template>
  <div>{{greeting}}</div>
</template>

<script>
export default {
  data () {
    return {
      greeting: 'hi',
    }
  }
}
</script>

Something to keep in mind, especially as you are scaling an app and it get's bigger, or you anticipate it will get bigger - is to only track data properties that are intended to be reactive. Storing static values as data properties is wasteful and can end up bogging down your app as it grows - because Vue has to track each of those properties for reactivity.

Basically, if you need a variable to be reactive, or exposed to the component template, create a data property for it. Hopefully that is straight forward and I explained it well.

Here are the Vue docs: https://v3.vuejs.org/guide/data-methods.html#data-properties

Upvotes: 1

Related Questions