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

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).

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.

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.