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

Harish Kumar · · 835 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()

REF

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

REACTIVE

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.

0

Please login or create new account to add your comment.

0 comments
You may also like:

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

What is Teleport Component in Vue.js 3?

Vue 3 provides the <teleport> component. Here in this post, I will show you how to use the <teleport> component in your Vue.js 3 project.
Razet

Multiple v-model Bindings in Vue 3

In this guide, I will explain the new v-model in Vue 3 and go through a new feature that permits you to utilize various v-model on the same component!
Razet