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

Harish Kumar · · 4292 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:

Best Practices for Testing and Quality Assurance in Custom Web App Development

In the fast-paced world of web app development, delivering high-quality products that meet customer expectations is crucial. But how can you ensure your custom web application (...)

Crafting Tomorrow's Apps: React Native App Development

You're on the edge of mobile app development and looking for the next big thing. React Native is one of the hottest platforms for building cross-platform apps that are fast, responsive, (...)
anika

Is jQuery Still a Relevant Choice for Modern Web Development?

In the ever-evolving landscape of web development, staying up to date with the latest trends and technologies is crucial. One question that often arises is whether jQuery, one (...)
Nakul Kumar

How to Use Husky and Lint-Staged with Git Hooks: Automate Code Quality & Formatting

One way to ensure code quality is by using Git hooks in conjunction with tools like Husky and lint-staged. These tools allow you to automate code quality checks and formatting (...)
Harish Kumar

Set up ESLint, Prettier, and VSCode for linting, formatting, and optimizing JavaScript code quality

In this comprehensive tutorial, we will explore how to set up and configure ESLint, Prettier, and Visual studio code to improve code quality and maintain consistent code style (...)
Harish Kumar

The Benefits of Using Hospital Management Software in 2024: A Guide for Healthcare Providers

In the ever-evolving healthcare landscape, integrating technology has become imperative for efficient and effective patient care. One such technological advancement that has revolutionized (...)
anika