Must-Know Ref vs Reactive Differences In Vue 3 Composition API

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

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.

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

import  { ref } from 'vue'; 

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

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.

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.

<template>
   {{count}}
</template>

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

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.

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

Recommended:
Must-Know Reusable Module Vs Component In Vue 3 Composition API

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.

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.

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

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

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