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.
Github Repository:
https://github.com/qirolab/vue-3-composition-api-tutorial
Timestamps:
- 00:00 Introduction
- 00:35 Usage of ref()
- 03:17 ref() vs reactive()
#vue #javascript #programming #developer #web-development
