Composition API: The need to know basics and 3 things to keep in mind.

Vue 3 miniseries

Hello! So I’ve been learning to code on Vue 3 and decided to write a set of articles on some of the most exciting things I’ve seen so far. Needless to say, Composition API is the first one.

🤔 But WHY???

From the start, I was impressed with Vue’s versatility and “junior coder” friendliness. Options API, which would be like Composition’s evil twin (just kidding! not evil, just twin 😜) is very intuitive and fun to learn. Options API structures code logic by options name, making it easy to learn.

But Vue 3 decided to tackle a common problem with this approach, (a very important one): scalability. As an app becomes larger and more complex, this approach has your component’s feature logic separated in small chunks and scattered throughout a file, making it difficult to maintain especially if you have not written the component initially. Below you can see an example of how the logic for a single feature would be organized in Options API, each feature logic represented by different colors:

Not mine. This is Vue’s.

If you are interested in learning more about how to organize an Options API logic, using Composition API, be sure to read this doc page by the Vue team.

On the other hand, the Vue team wanted to make sure there was a practical way of creating reusable code, and hence introduce composables or composition functions (we’ll get into it in the next article).

👾Ok, so HOW?

Composition API introduces the setup() option which runs before any lifecycle hook. Setup() will run before the component is even created, once props are resolved and ready to use 🤗. And on it, you will be able to write any JavaScript logic you need. Looking something like this:

<!-- MyComponent.vue -->
<template>
  <h1>Title</h1>
  <div>Hello, my name is {{ name }}, and I'm {{ age }} years old.</div>
</template>

<script>
   export default {
    setup() {
      let name = 'Pato'
      let age = 35

      // Return the properties so they can be accessed by template
      return {
        name,
        age
      }
    }
  }
</script>

So as a result the logic for each feature will be together, making the component scalable and easy to maintain.

The setup() function takes two arguments: the first one is props and the second context.

props are reactive so in case you need to use ES6 destructuring you should use toRefs, or it would otherwise affect the props reactivity.

context is a normal JS object, and it’s not reactive, we’ll cover this below.

⚠️ 3 Things to keep in mind

It’s not all rainbows and sunshine on Composition’s API side. Just kidding, but do note:

1. The values declared on setup() are NOT reactive by default. As you may remember, on Options API the data object converts its properties into getter/setters to make them reactive, and hence whenever we made a change, it would be reflected on the DOM. On setup(), in order to reflect changes, you will need to make sure the value is reactive by using either Ref or Reactive.
2. The “this” keyword is not available inside setup(). On Options API the “this” keyword refers to the component, but on Composition API “this” will be undefined. Because setup() is called before any other lifecycle hook, “this” won’t be a reference to the current active instance and therefore will not behave as in other options.
3. Setup() must return an object whenever you want the component’s template to access the properties of the context, as well as the ones of props passed into setup(). Whichever property from setup() that you want to use in the component’s template, needs to be returned in a JS object.

The example is not mine, it’s from the Vue docs. Here is the link.

🤩In summary…

I think it’s important to keep in mind that Vue 3 allows for both Options API and Composition API to be used when creating components. You can even combine them, so there's no need to settle for one.

But as the Vue framework moves forward, looking to improve itself by providing new features for developers to make code cleaner and reusable; I think it’s definitely something to look into and take advantage of especially while developing larger and more complex apps.

Hope you give it a try. See you next time! 👋