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

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

What is JavaScript Promise? Understanding and Implementing Promises in JS

JavaScript, the language of the web, has evolved tremendously over the years, and with it, the methods for handling asynchronous operations have improved. One such advancement (...)
Harish Kumar

JavaScript Array Destructuring: Unpacking Arrays with Ease

JavaScript array destructuring is a powerful feature introduced in ES6 (ECMAScript 2015) that simplifies the process of extracting values from arrays. It allows you to unpack an (...)
Harish Kumar

Arrow Functions: The Modern Way to Write JavaScript

JavaScript Arrow Functions, introduced in ES6 (ECMAScript 2015), have become a fundamental part of modern JavaScript development. They offer a concise and elegant way to write (...)
Harish Kumar

Essential JavaScript Tips for Better Coding - A Guide to JavaScript Best Practices

In the ever-evolving landscape of web development, the significance of JavaScript cannot be overstated. As the backbone of interactive websites, mastering JavaScript is essential (...)
Harish Kumar

From Beginner to Pro: Master JavaScript with This Comprehensive Guide (ES2015-ES2023)

Calling all aspiring and seasoned developers! I'm ecstatic to announce the release of my comprehensive eBook, "JavaScript: A Comprehensive Guide from ES2015 to ES2023". This in-depth (...)
Harish Kumar

Best Practices for Testing and Quality Assurance in Custom Web App Development

In the fast-paced world of web app development, delivering high-quality products that meet customer expectations is crucial. But how can you ensure your custom web application (...)
VisionX Technologies