Why We Use Composition API in Vue.JS

In Vue.js projects, whenever our application’ scale increases, to reuse functions and to make sure that codes are readable, we need more attention and more time for code review, refactoring and readable/clear code. Although we use Mixins to reuse functions and keep the components clear, they don’t fully meet our needs. I think that we can solve these problems with the Composition API. Today, I will mention ‘Why we use Composition API’ in this article.

Why Composition Api?

In my architectural framework, a front-end component should operate as unaware of business logic as possible.

Components should work like a view layer. The layer waits only for data and only renders the data. At this point our need for the Composition API arises.

Note: Actually, on this point I prefer pure JS class for business logic but I am not mentioning it in this article. This is a different topic.

  • It allows us to keep related functions in related compositions.
  • It allows us to use functions in any component again and again. Functions become reusable with compositions.
  • Composition API increases code readability.

We were trying to use Mixins as Composition API in Vue 2, but Mixins are not suitable for this job.

  • We can face conflict Mixins functions’ names when using them in components.
  • If code and Mixin count increases in one component, It is getting hard to understand which function comes from which Mixin.
  • When we use Mixin in Mixin, it was turning into a Mixin hell/chaos.

What are the new features in the Composition API?

We have one setup function in Component. The setup function works like a hook and the function has more hooks. Since we are using Vue 2, All the hooks we use in Vue2 are also valid here, with the only difference that we now have on prefixes. Our features such as computed, watch are also included in the setup, just like hooks.

The setup function triggers before component rendering so we can get props data with parameters because we don’t have props data at this time.

Note: We can’t use this keyword in setup function because composition API should be independent from its components.

  • We can use “ref” to convert reactive data into primitive value (boolean, string, number)
import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1
  • We can use “watchEffect” like Vue2 watch. We can summarize “watchEffect” as a simplified version of the classic “watch” feature in Vue.
<template>
<h2>Notes:</h2>
<textarea v-model="notes" />
</template>

<script lang="ts">
import { watchEffect, ref, defineComponent } from "vue";
import { save } from "./api";

export default defineComponent({
setup() {
const notes = ref("");

watchEffect(() => save(notes.value));

return {
notes,
};
},
});
</script>

Thank you for your time. See you in the next article…

--

--

--

Insights from the tech minds behind our technology

Recommended from Medium

JavaScript Arrays

Making a 3D web runner game #2: Designing our Game class

Let’s Talk Retro…

Building apps with Next.js (intro)

Tip #37[Promise.allSettled method]

Compiling a Node Project with Grunt

Roadmap Voting App with Serverless Redis

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ali Osman Menekse

Ali Osman Menekse

I am a Senior Front End Developer at Insider.

More from Medium

How To Use Environment Variables in Vite

Build a Reporting App With Vue 3

Danger of using v-html in Vue applications — see better approach

Create a Basic useFetch Hook in Vue.js

vue custom useFetch hook