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:
[ Ссылка ]
Vue.js 3.0 Breaking Changes, and Upgrade from Vue 2 to Vue 3
[ Ссылка ]
Learn Vue 3 Composition API with simple Todos example
[ Ссылка ]
Vue.js 3 Tutorial Playlist
[ Ссылка ]
Vue 2 Basics Beginner Tutorial
[ Ссылка ]
Vue.js 2 Components, Beginners tutorial
[ Ссылка ]
Vuex tutorial (Vue.js state management) with basic e-commerce example
[ Ссылка ]
Timestamps:
00:00 Introduction
00:35 Usage of ref()
03:17 ref() vs reactive()
Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: [ Ссылка ]
𝐓𝐰𝐢𝐭𝐭𝐞𝐫: [ Ссылка ]
