What is the difference between Ref() and Reactive() in Vue 3 Composition API?

Harish Kumar · · 2213 Views

The biggest feature of Vue 3 is the Composition API. This offers an elective way to deal with making components that is very different than the current options API.

With the Options API, we need to follow a few guidelines when defining reactive data, and the Composition API is the same. You can't simply declare data and anticipate that Vue should know that you might want it tracked for changes.

In Vue 3 Composition API, Ref() and Reactive() are the new ways of creating a reactive property.

Ref() vs Reactive()


If you need to make a reactive property of primitive data type, ref() will be your best option. This is not the only option, but this is a good place to begin. In Javascript, seven primitive data types are:

  1. String

  2. Number

  3. BigInt

  4. Boolean

  5. Symbol

  6. Null

  7. Undefined

ref() takes an inner value and returns a reactive and mutable ref object. The ref object has a single property .value that focuses on the inner value. This implies that if you need to access or mutate the value you have to utilize title.value


We just looked at certain examples of utilizing ref() when you need to define reactive data on primitive values. What happens if you need to make a reactive object? For that, you could utilize ref(). However, under the hood, it's simply calling reactive(). So, I will stick to using reactive().

On the other side of that reactive() won't work with primitive values. reactive() takes an object and returns a reactive proxy of the original. This is equivalent to 2.x's Vue.observable() and was renamed to avoid confusion with RxJS observables.


Please login or create new account to add your comment.

You may also like:

How to Create a Mobile App Using JavaScript: Step by Step Guide for 2023

How to Create a Mobile App Using JavaScript: Step by Step Guide for 2023
James Smith

Types of Instacart Clone Apps To Power Your Next Grocery Business

The Instacart app has been widely successful in delivering products on time. Not only are the items delivered safely, but they are also picked up by a specially assigned shopper. (...)
Narola Infotech

Vuex Tutorial: Learn State management in Vue.js using Vuex

The objective of this Vuex tutorial is to give you an essential understanding of state management in Vue.js using Vuex by creating a relatable example. By the end of this tutorial, (...)
Harish Kumar

How To Install NVM (Node Version Manager) on Ubuntu System?

This tutorial will assist you with installing NVM on the Ubuntu machine. Additionally, allow you to install different node versions and other useful examples.
Harish Kumar

How to Upload Multiple Images with jQuery AJAX and PHP, with preview

Uploading an image without page refresh is more user-friendly than refreshing the entire page. So, in this guide, you will learn how to upload multiple images using ajax in jQuery (...)
Nakul Kumar

Create SPA authentication Using Laravel Sanctum and Vue.js

In this guide, we will focus on SPA authentication in a simple Vue.js app using Laravel Sanctum. Laravel Sanctum provides a featherweight authentication system for SPAs (single (...)
Harish Kumar