↓Skip to main content

Vue.js 3 Composition API

·3 mins

The Vue composition API is going to be a major part of the Vue.js 3.0, it’s going to replace exist alongside the options API that we currently use.
All the examples in this article are taken from this repository by Natalia Tepluhina.

Here is a quick look at the limitations of Vue 2 and how Vue 3 solves them:

1. Maintainability #

With Vue 2 as components grow and got bigger and uglier, they become less readable therefore less maintainable.

Let’s look at App.vue (in master branch) for a component written using the options API:

The problem here is: Features are organized by component options, and since there are a lot of Vue options (props, data, methods, lifecycle events, watch, computed), the feature’s code might be divided up into six different pieces.

The composition-api solves this problem by making it possible to group the search and sort code each in one place and keeps it together. This helps make the components more readable since the code is organized by logical concerns.

Inside the Setup method

  1. Write a composition function for each feature.
  2. Call the functions from inside the setup method

2. Code reuse #

There is no perfect way to reuse code in Vue 2, each technique has it’s drawbacks:

Mixins #

Link to the example

  • ✅ Code is organized by feature
  • ⚠️ Can end up with property name conflicts
  • ⚠️ It’s not clear how and when these mixins interact
  • 🚫 We can’t easily reuse the code in other components since the mixins are generally tied to the components they serve

Mixin Factories #

They are functions that return a customized version of a mixin, they solve most of the drawbacks of using just mixins:

  • ✅ The code is now easily reusable in other components since we can send in configuration for each factory and get a customized mixin
  • ✅ If used correctly, they offer a clearer relationship of our mixins interact
  • ⚠️ Name spacing require strong conventions and discipline to do right
  • ⚠️ We still need to look inside each mixin to see which property it exposes
  • 🚫 Mixin factories can’t be dynamical generated

Scoped slots #

Link to the example

  • ✅ They solve most of the problems encountered using mixin
  • ⚠️ Some configurations end up in templates which should ideally contain only what we want to render
  • 🚫Less flexibility and less performance since we have to instantiate multiple vue instances for each component.

Composition functions #

Link to the Example

  • ✅ This solution uses Less code
  • ✅ Extremely flexible
  • 🎉 Since they are simple functions, inteliSense, auto-complete and typing already work with your editors
  • ⚠️ An additional syntax to write a component

3. Typescript #

Vue 2 had limited typescript support, there are ways to write it with typescript but they are not completely optimal, I might dig deeper into how Vue 3 is going to achieve this, but for now, I prefer to wait for an official version to be released.

Personally I think that the Composition API is going to bring a lot of flexibility and lead to more maintainable and structured code.

↑