Vue.js has become one of the most used JavaScript frameworks at the moment, and now its new version (3.0) is coming, along with some very interesting news. We will talk about some of them in this article.
Composition API - The main novelty
The main new functionality that will be implemented in Vue 3 will be the Composition API. This API will represent and facilitate the way we create new Vue instances. We are used to using the options or properties that Vue offers us. Here are some examples:
1 - data. Property that will contain the object's data.
2 - methods. Property that will contain the functions, or methods, that will be used in the Vue instance.
3 - computed. Property that will contain the computed properties of our code.
These are just a few properties that Vue has and makes available to us, and they work very well. However, with the new version of Vue, we will not need to declare these options, they will no longer be necessary. We will have just one method within the Vue instance, where everything will be stored.
We are talking about the setup() method. It will hold all the variables, data, and methods we want and return this information to our template. Our methods will be created as actual functions, which will bring our code closer to the native syntax of JavaScript language.
The setup() method will be executed before any others, which is very interesting. If we remember the concept of the Vue instance Lifecycle, we will recall methods like beforeCreate(), beforeMount(), or created(). These methods are executed before the Vue instance is ready to be used in our browser. Even so, the setup() method will be executed before all of them. Because of this, it will not have access to the reference of the object itself, meaning to this.
With this change and the introduction of this new method, Vue will be even easier to use, as everything will be centralized in one place. Furthermore, as our application grows, we will not “lose control” of it, so to speak, perhaps becoming confused with our code. With the Composition API, Vue has become even more robust.
It will also help us in reusing our code. We are used to using mixins to share useful data and functions among components. However, with the Composition API, we will be able to do this much more simply, by exporting and importing functions with native JavaScript, in a much easier way. We can say that the Composition API also represents an evolution of mixins.
Just a reminder: this new API is just an alternative for our code, but its use is not mandatory. Version 3 is compatible with previous versions of Vue, such as version 2. This means we can use the old syntax and our code will work without problems. However, if we use the new syntax, we will not regret it either.
Other novelties
The Composition API is the main novelty of version 3, but it is not the only one. One very interesting novelty that may arrive in version 3 of Vue is the possibility of using more than one v-model on the same element. We know that this directive can only be applied once to an element. However, we will be able to add this directive multiple times if we wish. It will be interesting to analyze how this will affect our application.
If you are a fan of TypeScript, you will surely like the next novelty, as version 3 of Vue will have support for this amazing JavaScript superset.
There will also be the addition of some concepts that remind us of a famous phrase associated with Vue. Have you heard the phrase: “Vue brings together the best of React and Angular”? Many features of Vue in version 2 were already similar to interesting concepts from React and Angular, such as the Virtual DOM and componentization. And in version 3, there will be the introduction of other features that are mainly used in React. Some examples of these are the concepts of Suspense, Portals, and Fragments. I consider the last one mentioned to be very interesting, as it will help us solve a small “problem” we had when creating components: we cannot define two root elements in a component. To solve this issue, we would usually add a Version 3 of Vue is not yet available for us to actually use. But, if you wish, you can download this version in its alpha stage by clicking here. You can do your tests and understand how this new version will influence our projects. The novelties we analyzed together are very interesting and will definitely take Vue.js to a new level in its structure. The truth is that every day that passes, Evan You and his team are making Vue an increasingly easier and simpler framework to implement, but at the same time, it is becoming more and more powerful. We at Hcode are very excited and eager for this new version, which will help all of us create amazing Web applications! Until the next article :)