Background
When it comes to defining or creating a component in Vue.js
, we probably have heard about the Options API
. Using Options API
not only we can create specific aspects or behaviors of a component but also allows us how we want to build components.
It provides different properties (or options) such as data
, methods
, computed
, and watch
through which we can organize the behavior of a component systematically. But since Vue 3
, we have another API called Composition API
through which we can achieve the same thing. The Composition API
is a new highlight for many Vue developers, but both approaches to define components have their unique pros and cons. So debating which among these two is better would be a difficult one.
In this blog, we will learn how we can convert a component defined in Options API
to Composition API
and we will also discuss the comparison of both APIs. Also at the end, we will know how we can define the component with Composition API
.
To demonstrate this, I have created a simple application called Voting Details
, which we will be examining together in this blog.
Play around with Voting Details
I have put this section in this blog since it's better to know some information about what we are building. The Voting Details
demo application stores the user's details and checks whether a user is eligible to vote or not.
I have implemented two separate components with the same functionalities, one is using Options API
and the other is using Composition API
. We will go through a bit in brief how we can change the functionality of a component same as in Options API
with Composition API
.
Note: To get the application up and running, make sure Node.js version 16 or above is installed into your system.
git clone https://github.com/SagarGi/OptionsVsCompositionVue
cd OptionsVsCompositionVue
npm install
npm run dev
We can access it through URL http://localhost:8000 and the application looks something like this.
What's in Options API
?
For the demo application, in Voting Details
I have defined a component using Options API
as:
<script>
export default {
data() {
return {
name: 'Sagar Gurung',
age: 18,
bornYear: 2005,
votingStatus: 'Eligible!'
}
},
methods: {
increaseAge() {
this.age++
},
decreaseAge() {
this.age--
}
},
computed: {
getVotingStatus() {
return (this.age >= 18) ? 'Eligible' : 'Not Eligible'
}
},
watch: {
age(oldAge, newAge) {
if(oldAge > newAge) {
this.bornYear--
} else {
this.bornYear++
}
}
}
}
</script>
In this demo app the properties data
, methods
, computed
, and watch
have been defined using Options API
. I will explain the meaning of each of them in the Composition API
section since we are converting component defined in Options API
with Composition API
.
Converting to Composition API
1. Defining data
When defining the data necessary for a component, in Composition API
, we have to make it reactive to mutate or change values with ref
or reactive
provided by Vue.js.
So data property can be defined as:
// data
const data = reactive({
name: 'Sagar Gurung',
age: 18,
votingStatus: "Eligible",
bornYear: 2005
})
2. Defining methods
Defining the methods is very simple. It is just as easy as defining functions in JavaScript.
// methods
function increaseAge() {
data.age++
}
function decreaseAge() {
data.age--
}
The above function changes the age
property of the data defined in data
which is reactive.
3. Defining computed
To define the computed property Vue provides the method called computed
through which we can explicitly define the computed function.
//computed
const getVotingStatus = computed(() => {
return (data.age >= 18) ? 'Eligible' : 'Not Eligible'
})
Here the operation getVotingStatus
returns the voting status based on value of age.
4. Defining watch
Similarly, Vue has provided a watch
function to watch the change in any data properties defined.
//watcher
watch(mainData.age, (oldAge, newAge) => {
if(oldAge > newAge) {
data.bornYear--
} else {
data.bornYear++
}
})
We have watched data age
in such a way that when age is increased the data bornYear
will decrease and vice-versa.
The whole script code snippet looks like this at last for the Composition API
:
import { reactive, toRefs, computed , watch} from "vue";
export default {
setup() {
// data
const data = reactive({
name: 'Sagar Gurung',
age: 18,
votingStatus: "Eligible",
bornYear: 2005
})
const mainData = toRefs(data)
// methods
function increaseAge() {
data.age++
}
function decreaseAge() {
data.age--
}
//computed
const getVotingStatus = computed(() => {
return (data.age >= 18) ? 'Eligible' : 'Not Eligible'
})
//watcher
watch(mainData.age, (oldAge, newAge) => {
if(oldAge > newAge) {
data.bornYear--
} else {
data.bornYear++
}
})
return {
...mainData,
increaseAge,
decreaseAge,
getVotingStatus
}
}
}
In the final code, we have imported reactive
, toRefs
, computed
, and watch
which are needed for building components with the Composition API
. toRefs
is used to convert the data created with reactive
to plain objects. Also, when using Composition API
we need to define all those data
, computed
, watch
, and methods
inside of function setup()
as done above.
At last, all the things that have been defined such as data
, computed
, and methods
need to be returned to be exposed to the template.
In this demo application we have learnt the basics of how to convert a component defined with Options API
to Composition API
. However, there are lots of other things that we can perform using the Composition API
.
I hope this blog gave you some insights on how to use the Composition API
and also how you can replace your component defined in Options API
with it.
If you want to learn more about both Options API
and Composition API
then you can learn more from here.
But before finishing the blog I would like to highlight some points regarding both Options API
and Composition API
so that you can relate which one to prefer before building up your projects.
Options API
and Composition API
You can find a lot of points regarding the comparison between these two APIs, both approaches for building up components have their benefits and drawbacks. I will only highlight five differences which I consider most relevant for choosing whether to use the Options API
or Composition API
in your own project:
-
Composition API
is new to Vue which can be called a modern way to define components whereas on the other handOptions API
is a proven, traditional way to build up components in Vue. - Also, the structure and syntax for the
Options API
seems a bit simpler and easier to understand than that of theComposition API
. It's a good choice for small projects and also for beginners. But for large and more complex projects, a better choice would beComposition API
since it has a more flexible and modular structure that enhances better code maintainability. - In addition to this, since
Composition API
is fully based on functional, reactive programming it can be difficult for learners who are not familiar with this approach. In this case,Options API
could be a suitable choice. - Moreover,
Composition API
having a function based structure with better type inference,Typescript
support is better than that ofOptions API
. -
Composition API
supports better code reusability as it has functions and modular composition preventing complex code, which ultimately leads to more intuitive code.
Top comments (0)