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

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

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

How To Install NVM (Node Version Manager) on Ubuntu System?

This tutorial will assist you with installing NVM on the Ubuntu machine. Additionally, allow you to install different node versions and other useful examples.
Harish Kumar

How to Upload Multiple Images with jQuery AJAX and PHP, with preview

Uploading an image without page refresh is more user-friendly than refreshing the entire page. So, in this guide, you will learn how to upload multiple images using ajax in jQuery (...)
Nakul Kumar

Create SPA authentication Using Laravel Sanctum and Vue.js

In this guide, we will focus on SPA authentication in a simple Vue.js app using Laravel Sanctum. Laravel Sanctum provides a featherweight authentication system for SPAs (single (...)
Harish Kumar

What is Teleport Component in Vue.js 3?

Vue 3 provides the <teleport> component. Here in this post, I will show you how to use the <teleport> component in your Vue.js 3 project.
Razet

Multiple v-model Bindings in Vue 3

In this guide, I will explain the new v-model in Vue 3 and go through a new feature that permits you to utilize various v-model on the same component!
Razet