Must-Know Ref vs Reactive Differences In Vue 3 Composition API
Tags: javascript, vue, programming
Published: 2021-04-26 13:54:08

Ref() and Reactive() are the new ways of creating reactive property introduced in Composition API Vue 3.

They are wrapper objects that can be initialized with inner values and assigned to variables.

In Vue 3, we need to import the desired package first before using it in the component.

I assume you already know how to get [Up and Running With Vue JS 3 Project Using Vue CLI](https://softauthor.com/up-and-running-with-vuejs3-project/)


###Ref()

We could create a variable as we normally do inside a setup function and add it to the returned object.

Then render it in the template.

This will work but there will be no reactivity.

```Javascript
<template>
   {{count}}
</template>
<script>
export default {
  setup() {
    let count = 0;
    return {
      count,
    };
  },
};
</script>
```

One of the ways we can create a property without losing its reactivity is by using ref().

The **ref()** object takes an inner value and returns a reactive and mutable object.

It’s great for primitive type single variables such as String, Boolean, Number, etc.

It has a single property called **.value** that points to the inner value that’s how we can get and set value to the property.

Import the **ref** package at the top.

```Javascript
import  { ref } from 'vue'; 
```

The count variable holds a ref() object with the inner value 0.

```Javascript
let count = ref(0); 
```

The ref() object will have a single property called value that points to the inner value which is 0 in this case.

To get or set a value to the count variable, we can unwrap the value of the name variable using its property **.value**.

```Javascript
console.log(count.value); // 0 get 
count.value = 12 // 12 set
```

Then we can render the count variable by returning it to the setup() function like below.

As you’ve noticed in the code below, the count property is rendered in the template without using .value property on it.

This is because when a ref object is added to the returned object from the setup function, it automatically unwraps the inner value when we use it in the template.

```Javascript
<template>
   {{count}}
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let count = ref(0);
    return {
      count,
    };
  },
};
</script>
```

![alt text](https://softauthor.com/wp-content/uploads/2020/10/Screen-Shot-2020-10-29-at-6.59.13-PM.png)

>*I use semantic ui CSS framework to style the UI.*

To check the reactivity on the count property, attach a click event to a button element.

Then add a number to the count property incremented by 1.

```HTML
<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;"
  >
    <button class="ui button red" @click="countNumber">Count</button>
    <div class="ui label big">{{ count }}</div>
  </div>
</template>


<script>
import { ref } from "vue";
export default {
  setup() {
    let count = ref(0);

     function countNumber() {
      count.value++;
    }

    return {
      count,
      countNumber
    };
  },
};
</script>
```

And the reactivity works as expected.

![alt text](https://softauthor.com/wp-content/uploads/2020/10/ref-reactive-vue3.gif)

>*Recommended:*
>[*Must-Know Reusable Module Vs Component In Vue 3 Composition API*](https://softauthor.com/vuejs-composition-api-reusable-module-vs-component/)


###Reactive() 

The **reactive()** is also a wrapper object that takes an object and returns a reactive proxy of the original object.

It‘s great for dictionary-structured types such as JS Object.

Import the reactive package at the top.

```Javascript
import  { reactive } from 'vue';
```

This is very similar to the ref object but the inner value should be dictionary-structured data like JS object instead of a single value.

```Javascript
let count = reactive({val: 0}); 
```

Using a proxy object, we can access inner object properties like we normally do.

```Javascript
console.log(count.val);
```

To make this object reactive, all we have to do is to increment the val property by 1 inside the button click event callback function.

[Continue Reading...](https://softauthor.com/vue3-ref-vs-reactive/)