Yes, Vue 3 is out but you probably don’t need it 🤷‍♂️
Tags: Vue 3, Vuejs, Vue, Vuejs 2, Design Patterns

I know I know, this article will probably cause some heat 🔥

Why would someone say that “you don’t need Vue 3”?

You may even be thinking: Yet another article about Vue 3.

Yes it is ! Same same but different.

Don’t worry, you will see clearly after reading this.

In this article, I’m going to compare side by side how to acheive Vue 3 stuff with the Vue 2 API, and basic JavaScript design patterns.

Why? Because sometimes, you can’t migrate your project to Vue 3 directly, but still want your code to be better.

If you want the “long-story-short” — jump to the next bold title

On September 18th 2020, Vue 3.0.0 One Piece came out 🎉

This version brings a lot of improvements under the hood and also in it’s API.

Evan You himself said Vue 3 would be: faster, smaller, more maintainable, more native-friendly and easier to use.

The biggest noticable change is without a doubt: the composition API.

During Vue 3's final development between 2019 & 2020, a lot of articles, videos and tutorials were already praising the composition API and, for me, something felt wrong.

Most of the arguments in favor of the composition API could easily be done with Vue 2 and some JavaScript design patterns.

Hear me out! I’m not saying Vue 3 is useless, I’m saying wanting to switch because it’s new, and without a meaningful reason is useless.

If you read any of my other stories, you would know I stand by 2 simple rules:

Focus on concepts and methods, not tech

Use the right tool for the right task

Let’s see when and when not to use Vue 3 in my humble opinion.

When to use Vue 3 and when not to

If you need IE11 support: don’t use it, support is not there yet If you are on a large existing project: don’t use it, depending on your code, the migration time and performance benefits may not be worth it If you have performance issues even after some optimizations: use it If you need a better TypeScript support: use it, it’s way better than before! If your dependencies support Vue 3: use it (captain obvious speaking 👨‍✈️)

In the end, I encourage any new project that doesn’t need support for IE11 to use Vue 3.

Now, let’s see features where you think you might need Vue 3, but actually don’t necessarily.

How does the composition API work in a nutshell?

So basically the current options API in Vue 2 has a big issue: it splits data, methods, computed and watch across the component.

It mixes concerns and makes it harder to reason about.

The Composition API makes it easy to group things because the component isn’t the one in charge of the reactivity anymore.

Here’s an image to illustrate.

Options API vs Composition API (source: www.infoq.com)

But the thing is… There are ways to do this in Vue 2 too (little pun there).

Use Vue 2 hooks in a smarter way

So basically in Vue 2, hooks are options, so they are also split acrouss the component, but there’s a way to overcome that!

Let’s say you have an autosave method that you execute each 10 seconds. You want the interval to start when the component is created, and clear it when the component is destroyed.

Normally you would do this:

Options API with regular lifecycle hooks

A better way to centralize this is to use the $on(‘hook:event’, func)

Options API with lifecycle hooks events

This gives you the same ability as the Composition API would.

Composition API

Use the factory design pattern to extract behaviour

Another great feature of the new Composition API is the ability to extract logic.

Components is good to extract logic with template, but there were no “good” way to do that in Vue 2… Well maybe there was!

Mixins and Renderless components to the rescue!

Let’s say I’m building an admin panel. In this admin panel I have a basic crud in many places, but with a different UI. How would I hadle this?

With a mixin! But mixins merges stuff so it can create name collissions.

How can we solve that? With a factory!