Ref vs Reactive - Vue 3 Composition API | Vue.js 3 Tutorial

Ref vs Reactive in #Vue3: With the Options API, we need to adhere to certain standards when defining reactive data and the Composition API is the same. You can't simply declare data and anticipate that #Vue should know that declared data should be tracked for changes. In Composition API, we use `ref` and `reactive` to make data reactive, so it should track for changes.

We can import { ref } from 'vue' and use `ref()` which will mark that variable as reactive data. Similarly, we can import { reactive } from 'vue' and use `reactive()`, and then pass an object with data which will create reactive object data.

If you want to make a primitive data type a reactive property, `ref()` is the first choice. In Javascript, the primitive data types are:
- String
- Number
- BigInt
- Boolean
- Symbol
- Null
- Undefined

On the flip side of that `reactive()` will not work with primitive values. `reactive()` takes an object and returns a reactive proxy of the original.

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

Github Repository:

Learn Vue 3 Composition API with simple Todos example

Vue 2 Basics Beginner Tutorial

Timestamps:
00:00 Introduction
00:35 Usage of ref()
03:17 ref() vs reactive()

Also, follow us on:

[tampantapipemalu]

nice bro, i'm always waiting for your lesson :)

[litecode]

it's just awesome 😱 video bro. carry on 💚