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

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

Mastering the `array.map` Method in JavaScript

The array.map method in JavaScript is a powerful and versatile function used to create a new array by applying a specified function to each element of the original array. It’s (...)
Harish Kumar

JavaScript Async/Await: Writing Clean and Efficient Asynchronous Code

JavaScript is a single-threaded programming language. Thus, it means that it can execute one command at a time. How can this be possible? Well, the answer lies in the fact that (...)
Harish Kumar

React Components Explained: Function vs Class Components

React, a popular JavaScript library for building user interfaces, revolves around components. Components are the building blocks of a React application, encapsulating logic and (...)
Harish Kumar

Understanding JavaScript Promises: Advanced Techniques and Best Practices

JavaScript Promises are a powerful tool for managing asynchronous operations in JavaScript, offering a more readable and maintainable approach than traditional callback methods. (...)
Harish Kumar

JSX in React: A Comprehensive Guide

JavaScript XML (JSX) is a syntax extension for JavaScript, commonly used with React to describe what the user interface should look like. Introduced by Facebook, JSX makes it easier (...)
Harish Kumar

How to Create a React.js App Using Vite: A Step-by-Step Guide

Creating a React.js application traditionally involves using Create React App (CRA), but recently, Vite has emerged as a powerful alternative. Vite offers faster builds, hot module (...)
Harish Kumar