Must-Know Property Creation Differences in Vue 2 and Vue 3
Tags: vue, programming
Published: 2021-08-23 16:25:42

I’m going to show you how to create a property in Vue 2 using [Options API](https://vuejs.org/v2/api/). Then I am going to show you how to create it in Vue 3 using [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html).

Then, you’re going to learn how to create properties using wrapper objects [ref](https://v3.vuejs.org/guide/composition-api-introduction.html#reactive) and [reactive](https://v3.vuejs.org/guide/composition-api-introduction.html#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**.

```JavaScript
export default {
  data() {
    return {
      name: null
    }
  }
}
```

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.

```JavaScript
export default {
  ...
  mounted() {
    console.log(this.name);
  }
}
```
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.

```JavaScript
<template>
  <div>
    {{name}}
  </div>
</template>
```

>*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.

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

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

```JavaScript
<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("");
     }
  } 
</script>
```

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.

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

*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.

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

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.

```JavaScript
return {
  name:name
}
```

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

```JavaScript
return {
  name
}
```

###Access The Property In The Vue 3 Template

[Continue Reading...](https://softauthor.com/vue-create-a-property-optionsapi-compositionapi/)