Why Composition API in Vue 3, and Options API vs. Composition API?

Harish Kumar · · 4008 Views

Perhaps the greatest feature in Vue 3's release is Vue's new Composition API. As developers start creating more large-scale projects with Vue, the difficulties of code organization, readability, and reusability have gotten more apparent.

The objective of the Composition API, which is inspired by React Hooks, is to simplify Vue components, improving readability and organization, and make it simpler to reuse code all through your application.

The Composition API won't just permit developers to utilize it over component options. However, it additionally includes composition functions, which can be utilized over Vue's different techniques for code reusability (e.g., mixins and scoped slots).

Vue 3 Composition API with Todos example

Options API vs. Composition API

Better extensibility and organization

One significant worry among developers was that their Vue projects turned out to be difficult to manage as they grew in size and complexity.

In Vue 2.x, components are organized using options, for data, computed, methods, and so on. Along these lines, logic isn't generally grouped by feature, which can make it difficult to peruse an enormous and complex code. Developers would often need to scroll back and forth to follow what's happening in the code. Another drawback of this Option API is that it caused logic to reuse troublesome, as features are separated unintuitively in a component.

The Composition API RFC includes this diagram indicating the progression of various worries in the same component worked with both the Options API and Composition API. Each color speaks to a different logical concern. As appeared, using composition functions with the Composition API allows for better organization in components.

Options API vs. Composition API

Options API vs. Composition API

Better TypeScript support

The next issue with Vue 2.x was that the occasionally confusing nature of this inside components regularly made it hard to utilize TypeScript. The Options API depends on a lot of "magic" from the Vue compiler.

The Composition API, however, utilizes those internal functions directly, so this acts as expected in JavaScript. This allows much better TypeScript support when utilizing the Composition API.

Code composition

Here are two pieces of code, both are from the same component. The first uses the Vue 2 Options API, and the second uses the new Composition API.

With Option API:

<template> 
  <div> 
     <h1>Counter</h1> 
       <p>Count: </p> 
       <button @click="countIncrement()">Increase Count</button> 
       <button @click="countByFive()">Increase Count by 5</button> 
       <button @click="clearCount()">Clear Count</button> 
     </div> 
</template> 
<script>    
export default { 
     data: function() { 
       return { 
         count: 0 
       } 
     }, 
     methods: { 
       countIncrement() { 
         this.count++; 
       }, 
       clearCount() { 
         this.count = 0; 
       }, 
       countByFive() { 
         this.count += 5; 
       } 
     } 
   }    
</script>

The same component with the composition API:

<template> 
  <div> 
    <h1>Counter</h1> 
       <p>Count: </p> 
       <button @click="countIncrement()">Increase Count</button> 
       <button @click="countByFive()">Increase Count by 5</button> 
       <button @click="clearCount()">Clear Count</button> 
     </div>    
</template>    
<script> 
import { ref } from "@vue/composition-api";    
export default { 
     setup() { 
       const count = ref(0); 
       function countIncrement() { 
         this.count++; 
       } 
       function clearCount() { 
         this.count = 0; 
       } 
       function countByFive() { 
         this.count += 5; 
       } 
       return { count, countIncrement, clearCount, counyByFive ;     } 
   }    
</script>

With the Composition API, we ditch component options and replace them with the setup() function. Now you're ready to structure your component in manners that best fit your logic and functionality, rather than being confined by the component options.

0

Please login or create new account to add your comment.

0 comments
You may also like:

The Ultimate Guide to Mobile Game Development in 2023

Did you know that a game is a composition of all the modern aspects that are important for humans in today's world. It includes programming, art design, music, writing, and much (...)
Kenny William

How 2D Game Development Company is Helpful To Develop Excellent Mobile Games in 2023?

A reliable 2D game development company can be very helpful in developing outstanding mobile games because of their specialized expertise and experience in the domain. Here are (...)
Kenny William

Learn PHP Development from beginning.

PHP stance Hypertext Preprocessor, it's server-side scripting laungage and easy to use. PHP  also well  known for its speed, simplicity, flexibility features that have made it (...)
Programmer Desk

How to Create a Mobile App Using JavaScript: Step by Step Guide for 2023

How to Create a Mobile App Using JavaScript: Step by Step Guide for 2023
James Smith

Types of Instacart Clone Apps To Power Your Next Grocery Business

The Instacart app has been widely successful in delivering products on time. Not only are the items delivered safely, but they are also picked up by a specially assigned shopper. (...)
Narola Infotech

Vuex Tutorial: Learn State management in Vue.js using Vuex

The objective of this Vuex tutorial is to give you an essential understanding of state management in Vue.js using Vuex by creating a relatable example. By the end of this tutorial, (...)
Harish Kumar