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

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

Vue 3: Best Practices for Efficient and Scalable Development

Vue.js is a popular JavaScript framework for building user interfaces. It has several features that enhance the development process and performance of applications. This guide (...)
Harish Kumar

JavaScript's Array .forEach() Method Explained: Tips, Tricks, and Examples

The array .forEach() method is one of the most powerful tools in JavaScript, used for executing a provided function once upon an array element. Common applications involve iterating (...)
Harish Kumar

Mastering JavaScript Performance: Techniques, Patterns, and Best Practices

JavaScript is the backbone of modern web applications, providing the interactivity and dynamic behavior that users have come to expect. However, as applications become more complex, (...)
Harish Kumar

React State Management: `useState` Hook vs. Class `setState()`

React provides two primary ways to manage state in components: the useState Hook for functional components and setState() along with this.state for class components. Both methods (...)
Harish Kumar

Mastering the `array.map` Method in JavaScript

The array.map method in JavaScript is a powerful and versatile function used to create a new array by applying a specified function to each element of the original array. It’s (...)
Harish Kumar

JavaScript Async/Await: Writing Clean and Efficient Asynchronous Code

JavaScript is a single-threaded programming language. Thus, it means that it can execute one command at a time. How can this be possible? Well, the answer lies in the fact that (...)
Harish Kumar