Vue3 Composition Api Computed

Posted on  by admin
In this tutorial, we’ll explore how to use the Vue 3 Composition API and its latest code reusability capabilities.

Replacing the provide & inject options with provide() and inject()

Two-way databinding with v-model

Code sharing and reusability are one of the cornerstones of software development. Since the earliest days of programming, the problem of code repetition has made programmers invent strategies for keeping their code DRY, reusable and portable. As time has passed, these strategies have been constantly polished and improved, and new ones are constantly developed.

This applies equally to Vue as to other programming languages and frameworks. As the Vue framework has evolved, it it has continued to offer much better reusability approaches.

Let’s consider what makes a piece of code reusable.

For me, there are three main principles of reusability:.

Code abstraction. A piece of code is abstract when it can suit multiple different use cases (like classes in many programming languages). Code portability. A piece of code is portable when it can be used not only in different places in one project but also in different projects.

Code decoupling (or loose coupling). A piece of code is decoupled from another one when changing one doesn’t require changing the other. They’re as independent of each other as possible. Of course, complete decoupling is impossible — which is why the more accurate term used by developers is “loosely coupled”.

Conclusion

The Composition API is a new strategy for building and structuring Vue 3 components. It incorporates all of the three principles described above and allows for creating abstract, portable, and loosely coupled components that can be reused and shared between different projects.

The motivation for the Composition API to be added to Vue 3 is clear and simple: producing more compact and defragmented code.

Let’s explore this a bit more. When I found Vue for the first time, I was hooked by its Options (object-based) API.

It seemed to me way more clear and elegant in contrast to the Angular and React equivalents. Everything has its own place and I can just put it in there.

When I have some data, I put it in a data option; when I have some functions, I put them in a methods option, and so on:.

All this seems quite ordered, clean, and easy to read and understand. It turns out, however, that this is valid only while an app is relatively small and simple.

As the app and its components grow more and more, the code fragmentation and disorder increase. When the Options API is used in large projects, the code base soon starts to become like a fragmented hard disk.

When the Composition API is a good fit for a component and when it isn’t

Different parts of the code in a component, which logically belong together, are spread in different places.

Solution

This makes the code hard to read, understand and maintain. This is where the Composition API comes into play.

It offers a way to structure the code in order, where all logical parts are grouped together as a unit. To some extent, you can imagine the Composition API as a disk defragmentation tool.

It helps you to keep the code compact and clean. Here’s a simplified visual example:. As you can see, a component’s code built with Options API could be quite fragmented, while a component’s code built with the Composition API is grouped by features and looks much easier to read and maintain.

Here’s a summary of the main advantages the Composition API offers:.

Better code composition. Logically related blocks are kept together.

  1. Better overall performance compared to Vue 2. The code is logically better ordered, which makes it much more meaningful and easy to read and understand.
  2. Easy to extract and import functionality. TypeScript support, which improves IDE integrations and code assistance, and code debugging.
Whatever value is returned from the function passed to `computed` (initially `9`) will be the value that `nameLength` is set to.

Note: if you need to access a computed property value in setup(), then you must use .value.

If you need to access a computed property within