James Stewart recently compared the incoming Vue 3 function-based Composition API to the current Vue 2.x class-based Options API. In a presentation held at the second Vue.js Glasgow meetup event, Stewart analyzed the code from the same application written with both APIs, and concluded that the Vue 3 API leads to better code structuring, and makes the isolation and composition of logic easier than before.
The Vue 3 Composition API departs from the current Vue 2 class-based API (termed as the Options API), and allows developers to encapsulate and reuse logic in functions, in a way similar to React Hooks, or Svelte 3. The initial reaction from the developer community included several criticisms of the new API. Some developers failed entirely to see what was the problem being solved by the API, others complained that the API changes would lead to spaghetti code. Stewart addressed those two criticisms in its presentation by comparing the same application written in Vue 2 and Vue 3.
Addressing the first criticism, Stewart explained that, in his view, hooks are smarter mixins. As a matter of fact, the Composition API and mixins pursue the same goal: encapsulate a set of functionalities for reuse in arbitrary component contexts. The Composition API, unlike mixins, allows not only to encapsulate logic but also to compose those pieces of encapsulated logic in an arbitrary manner. A piece of encapsulated logic can itself be built upon another piece of encapsulated logic, and combined within a Vue 3 component to form the desired behaviour of the component.
With respect to the second presented criticism, Stewart also concluded, based on his code example, that organizing logic away from options (as in the Options API) and into functional blocs (as in the Composition API) may be more readable, by forming cohesive groups of logic. He gives the following illustration, assigning colors to code parts according to the functionalities they participate in:
The first colored code sample on the left uses the Options API (featuring data, methods and computed properties on the Vue component instance). The second colored code sample on the right uses the proposed Vue 3’s Composition API and exposes a single setup function which neatly groups: the source of truth for component data and the variables derived from it (Pet list); the Pet addition logic; and the Pet actions logic. The source codes for the example is available in a dedicated GitHub repository.
The official documentation for the Composition API includes a larger example taken from the Vue CLI UI file explorer and reviews in detail how the Composition API affects code organization, with positive and negative implications.
In January of this year, Evan You, Vue’s creator, previewed Vue 3.0, the next major iteration for the Vue.js progressive JavaScript framework. The Vue 3.0 focused heavily on performance improvements (smaller size of the core, tree-shaking, optimized slots generation, hoisting and inlining, and more). The early preview quickly mentioned in passing the experimental Vue Hooks API which Sarah Drasner detailed in an article later in February this year.
Later, in June, the experimental Vue Hooks were refined into the Vue Function API and then, in August, further refined and renamed to Vue Composition API, after several nomenclature changes. Rather than using the term hooks, the official Composition API documentation favours the term composition function.
The Composition API is purely additive and does not affect / deprecate any existing 2.x APIs. It has been made available as a 2.x plugin via the @vue/composition library. The library’s primary goal is to provide a way to experiment with the API and to collect feedback. The Vue Composition API remains a work in progress and is subject to future changes till the official release of Vue 3.0. The Composition API will be shipped as built-in in Vue 3.0 and will be usable alongside existing 2.x options.
Vue.js is available under the MIT open-source license. Contributions are welcome via the Vue.js GitHub package and should follow the Vue.js contribution guidelines.
