The Difference Between the Composition API and Options API in Vue

Up till Vue 2, there was one approach to create elements in Vue. With Vue 3, a brand new methodology was launched known as the Composition API. Now, if we wish to make a element in Vue, we have now two methods to do it. You could be questioning what the distinction is, precisely, so let’s check out how the newer Composition API differs from the Vue 2 methodology, which is now generally known as the Choices API



What’s the distinction between the Composition and Choices API in Vue?

The quick reply is syntax. The Composition API lets us create elements with out the necessity of a giant single exportable object, like within the Choices API. For instance, if we needed to make a easy counter element with the Choices API, it might appear to be the code beneath.



Choices API

<template>
    <h1>{{ counter }}</h1>
    <button @click on="incrCounter">Click on Me</button>
</template>
<script>
export default {
    knowledge() {
        return {
            counter: 0
        }
    },
    strategies: {
        incrCounter: perform() {
            this.counter += 1;
        }
    }
}
</script>
Enter fullscreen mode

Exit fullscreen mode

If as an alternative we needed to put in writing the identical code with the Composition API, it might appear to be this.



Composition API

<template>
    <h1>{{ counter }}</h1>
    <button @click on="incrCounter">Click on Me</button>
</template>
<script setup>
    import { ref } from 'vue'

    let counter = ref(0);

    const incrCounter = perform() {
        counter.worth += 1;
    }
</script>
Enter fullscreen mode

Exit fullscreen mode

You will discover a couple of variations:

  • We imported one thing known as ref – this lets us create reactive variables
  • Once we improve counter, we really improve counter.worth, since ref returns an object.
  • We keep away from having to make use of a whole prototype, and as an alternative simply have a sincle incrCounter perform



Reactivity in Composition API

Together with ref, we will additionally use reactive for objects. Each of those give variables reactive capabilities, that means we do not lose any performance.



The advantages of the Composition API

As you’ll be able to see, the composition API is much more streamline than the Choices API, and requires so much much less code. It additionally has the additional benefit of compartmentalizing code. Let’s think about a foolish instance with two counters – one button will increase the output by 1, and the opposite by 2. Within the Choices API, we might write that like this:

<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click on="incrCounter">Click on Me</button>
    <button @click on="increaseByTwo">Click on Me For two</button>
</template>
<script>
export default {
    knowledge() {
        return {
            counter: 0,
            doubleCounter: 0 
        }
    },
    strategies: {
        incrCounter: perform() {
            this.counter += 1;
        },
        increaseByTwo: perform() {
            this.doubleCounter += 2;
        }
    }
}
</script>
Enter fullscreen mode

Exit fullscreen mode

Within the Parts API alternatively, it’d appear to be this:

<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click on="incrCounter">Click on Me</button>
    <button @click on="increaseByTwo">Click on Me For two</button>
</template>

<script setup>
    import { ref } from 'vue'

    let counter = ref(0);
    const incrCounter = perform() {
        counter.worth += 1;
    }

    let doubleCounter = ref(0);
    const increaseByTwo = perform() {
        doubleCounter.worth += 2;
    }
</script>
Enter fullscreen mode

Exit fullscreen mode

The distinction is small, however you may discover one thing attention-grabbing – on the Composition API, all of the associated code stays shut collectively, so you do not have to hope round as a lot. Within the picture beneath, you’ll be able to see that, the place code with related performance is highlighted in the identical color.

On the proper, the Composition API retains its code all in the identical place. On small initiatives, this does not make a giant distinction – however on bigger ones, maintainability will increase.



Different Advantages to the Composition API

  • Replaces mixins, and all the problems resembling title collisions that come together with them.
  • Higher sort help, because it makes use of largely regular features and variables, no sophisticated typing is required in TypeScript.
  • Smaller recordsdata – as talked about, the Composition API requires much less code.



Do I want to make use of the Composition API now?

No! There isn’t any motive to change your code to the Composition API if the Choices API nonetheless works fantastic for you. The Choices API is not going wherever, and as an alternative the Composition API gives another means to create Vue elements.

In some instances, the Choices API should be a greater choice for you (pun not meant).



Is the Composition API higher than the Choices API?

There isn’t any easy reply to that query. Each strategies have their deserves, they usually could also be helpful in sure conditions. No matter you determine to go along with is completely fantastic, however the Composition API does resolve a few of the points the Choices API introduced together with it.

Add a Comment

Your email address will not be published. Required fields are marked *