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

Harish Kumar · · 2536 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:

The Ultimate Guide to Mobile Game Development in 2023

Did you know that a game is a composition of all the modern aspects that are important for humans in today's world. It includes programming, art design, music, writing, and much (...)
Kenny William

How 2D Game Development Company is Helpful To Develop Excellent Mobile Games in 2023?

A reliable 2D game development company can be very helpful in developing outstanding mobile games because of their specialized expertise and experience in the domain. Here are (...)
Kenny William

Learn PHP Development from beginning.

PHP stance Hypertext Preprocessor, it's server-side scripting laungage and easy to use. PHP  also well  known for its speed, simplicity, flexibility features that have made it (...)
Programmer Desk

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