Vue Composition API: Empowering Flexible and Maintainable Vue.js Applications

Quick Summary:Vue Composition API- Organized, Readable, and Understandable

Table of Contents

What is Vue Composition API?

Vue Composition API is a function-based API that provides flexibility, improves code readability, and helps to maintain component logic. Composition API is a built-in feature of Vue 3, also available in Vue 2 through the @Vue/composition-API plugin.

Composition API allows you to structure code into smaller pieces and group them together. Also, you can reuse it if required. The component code is based on functionality or features. It is useful for large and complex applications.

The main reason for introducing Composition API in Vue was to address the limitations of Options API as the component gets larger. Here are some of the limitations associated with Options API-

• Ineffective patterns for reusing logic and component
• Poor readability when component grows larger
• Code gets complex and difficult to manage when the project size increases
• Creates confusion and makes it difficult to use Typescript with ‘this.’

Vue Composition API vs Options API

Following are the key differences between Vue Composition API and Options API. Let’s understand it briefly using code:

The Difference In The Component Because Of Vue Composition API

You will notice a setup() function is the major change. It comprises the component’s logic. In Options API we used to define data, methods, lifecycle, etc separately as a component option, but due to composition API, setup() function will consist of all these.

Also, Composition API Vue sorts the component code and makes the logic reusable in a much better way.

Let’s take a sample code from the Github repository: Vue 3 Typescript, which we have built in one of our previous blog- How to Build a To-do App with Typescript: Vue 3 Tutorial.

The One With Options API

Following are the examples of Option API to create an application using Vue 2.

export default{
 name: "Home",
 data() {
   return {
     tasks: []
   };
 },
 methods: {
   setTaskComplete(task){
     this.$store.commit("completeTask", task);
   },
   deleteTask(task) {
     this.$store.commit("deleteTask", task);
   }
 },
 mounted() {
   this.tasks = this.$store.state.tasks;
 }
};
 

We have used component options – data, methods, and for splitting the component’s logic. Vue provides a total of six component options to use the logic. However, it becomes challenging while organizing complex code or when components grow.

Are you looking for proficient VueJs developers for your project?
Bacancy is here for you! Contact us now and hire Vue js developer to build, optimize, and deploy your application.

The One With Composition API

Here are the methods in vue 3 Composition API that created dynamic and flexible Vue js applications.

export default defineComponent({
 name: "Home",
 setup() {
   const tasks = ref([]); // ref is used to make the parameter reactive
   const store = useStore();  //alternative to Vue prototype of this.$store
   tasks.value = store.state.tasks;
 
   //this is the way to write methods
   const setTaskComplete = (task: Task): void => {
     store.commit(MutationType.CompleteTask, task);
   };  
   const deleteTask = (task: Task) => {
     store.commit(MutationType.DeleteTask, task);
   };
 
   // To support two-way data binding
   return {  
     tasks,
     setTaskComplete,
     deleteTask
   };
 }
});
</script>

On the contrary, you can see that the setup() function has combined all the six components together, which increases the readability and understandability of the code.

Key Features of Vue Composition APIs

The Vue Composition API provides various features that improve code organization, boost reusability, and help developers to work efficiently. The primary features of Composition APIs in Vue are:

1. Reactivity API

Reactivity is a fundamental feature of Vue Composition API that allows automatic tracking and updating of data dependencies in the user interface. The Composition API uses reactivity through the reactive and ref functions.

The ref functions create a reactive reference to the value, enabling tracking changes and effective UI reactivity. As a result, ref () and reactive () enable direct development of react state, watchers, and computed state.

Leveraging Reactivity API, developers can build flexible and responsive Vue 3 applications.

2. Lifecycle Hooks

The Composition API is introduced to redefine the approach for a more flexible and easier way to handle component lifecycle events through lifecycle hooks. It has two hooks: “onMounted” and “onUnmounted,” hook that enables meticulously hook into component lifecycles.

The onMounted hook executes code when a component is first mounted in the DOM. It provides a hook that allows developers to fetch data from API, set up external dependencies, and while performing initialization.

The onUnmounted hook executes when a component’s reactive dependency changes. The hook lets you respond to changes immediately and update the component accordingly. It enables cleanup operations when a component is unmounted.

3. Dependency Injections

This component API is crucial to build dynamic and maintainable vue js applications. Dependency Injections separate the code reusability and allow components to rely on injected dependencies instead of hardcoding dependencies.

Using the provide function, a parent component can fetch data, functions, and services to other components. It helps to maintain component hierarchy in a centralized way.

Meanwhile, the inject function allows access to components that provide values. This function allows components to access shared resources across nested components and enhance code maintainability in vue 3 applications.

You Might Also Like to Read:

Why Use Vue JS? Frontend’s Every Aspect Covered

Composition API with TypeScript

Vue 3 is written in Typescript and leveraging it with Composition API is beneficial for Vuejs applications. Using Composition API with Vuex 4 Typescript, you can benefit from static type checking, type inferences, and IDE auto-completion.

However, to leverage Composition API Typescript, you need to install the necessary dependencies and configure that support application. As Composition API is not a functional programming, it allows you to define the type of annotations to receive data and computed properties methods.

Additionally, you can catch errors during development and improve collaboration in large codebases, which build dynamic and scalable Vue applications.

Conclusion