DEV Community

Cover image for Must-Know Property Creation Differences in Vue 2 and Vue 3
Raja Tamil
Raja Tamil

Posted on

Must-Know Property Creation Differences in Vue 2 and Vue 3

I’m going to show you how to create a property in Vue 2 using Options API. Then I am going to show you how to create it in Vue 3 using Composition API.

Then, you’re going to learn how to create properties using wrapper objects ref and reactive, when to use them and why.

By the end of this article, you’ll be able to understand the property creation differences between Vue 2 Options API vs Vue 3 Composition API.

Sounds interesting…Let’s get started!

Define A Property Using Options API Vue 2

One of the ways to declare properties in Options API, introduced in Vue 2, is to have them added to the JavaScript object that the data() function returns.

As you can see, I’ve created a name property and set its initial value to null.

export default {
  data() {
    return {
      name: null
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

When we create a property using Options API, it becomes reactive by default.

Reactive?

The name property is reactive meaning it can be bound to an HTML element in the template.

Whenever the property values change, the view gets updated and vice versa, which is also called two-way data binding.

All the properties that we declare in the Options API are reactive which can be good most of the time.

Access The Property in JavaScript Vue 2

To access the name property anywhere inside the export default object in this component, we can use this keyword in the Options API.

Let’s say I want to access it inside the mounted() function which is one of the lifecycle methods in Options API.

export default {
  ...
  mounted() {
    console.log(this.name);
  }
}
Enter fullscreen mode Exit fullscreen mode

Let’s see how to access the name property in the Vue template.

Access The Property in the Vue 2 Template

Whenever we create properties using Options API, they are not only reactive but also become immediately available to the Vue template.

So, we can simply use double curly braces to access the name property in between the template tags.

<template>
  <div>
    {{name}}
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

In Vue 2, inside the template tags, we need to have one parent element in which all other elements will go in.

You may know this process already but let’s see how to do that using the new Composition API.

Composition API (Vue 3)

One of the great things about Vue 3 is that we can literally use Options API to create reactive properties like in the example above and it’ll just work like a charm.

Additionally, we can now use Composition API to create properties that are very flexible and you can see why just in a moment.

There are two ways to create reactive properties in Vue 3 which are:

  • ref
  • reactive

ref()

In Vue 3, we need to import any package that we want to use in our app.

This way we only include the package that we use in the production bundle which makes the app lighter and faster.

<script>
  import { ref } from "vue";
  export default {
     setup() {
       // all of your variables and function will go here
     }
  } 
</script>
Enter fullscreen mode Exit fullscreen mode

With Composition API, all of the properties and functions will go inside the setup() method of the export default object.

<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("");
     }
  } 
</script>
Enter fullscreen mode Exit fullscreen mode

In there, we can create properties as a variable using let or const or var (not recommended) keywords.

On the right side, the value of the name variable is an empty string wrapped with the ref object.

So what is ref() object? 🤷‍♂️

A ref is a wrapper object that takes an inner value and returns a reactive and mutable object.

We can assign it to a variable with an initial value inside the parentheses…in this case a pair of double-quotes.

So why do we need it?

It keeps the reactivity when the value of the name variable changes by emitting a reactive event so the observers can be updated automatically.

It takes an inner value and returns a reactive and mutable object.

Now the name variable is a type of ref object wrapped with a value inside.

Access The Ref() Variable In JavaScript

To get the value associated with the name variable, we just need to unwrap it using the .value property of it which will then give the value.

The ref() object will have a single property called .value that points to the inner value.

<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("Raja");
       name.value = Raja Tamil; // Set
       console.log(name.value) // Get
     }
  } 
</script>
Enter fullscreen mode Exit fullscreen mode

Yes, when you want to set a value to the name variable, we need to use .value as well.

As you know, in Vue 2 with Options API, all the properties become available in the template as soon as they are created.

But in Vue 3 with Composition API, we have an option to explicitly expose the properties and function to the template.

This means we can now create a variable that is private which can be only accessed inside the setup() function.

Now, all we need to do is add this variable as a property in a JavaScript object that the setup() function returns.

<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("Raja");
       return {
          username: name
       }
     }
 } 
</script>
Enter fullscreen mode Exit fullscreen mode

The returned object has one property which is a username and the value is the name that is declared above.

Coming from Vue 2, this is one of the things I often forget to add the variable as a property to the returned object. 😉

Most of the time, you want the key and value of the property to be the same for maintainability purposes.

return {
  name:name
}
Enter fullscreen mode Exit fullscreen mode

To simplify this, Use object property value shorthand like this.

return {
  name
}
Enter fullscreen mode Exit fullscreen mode

Access The Property In The Vue 3 Template

Continue Reading...

Discussion (0)