Since the release of Vue 2, Vuejs has grown rapidly. It is receiving awesome reviews from the users. Vuejs was one of the most popular Javascript front end frameworks in 2018 along with the giants like Angular and React. And now Vue 3 is all set to release. For the last few months, it has been in talks across various parts of the world.
The team has focused on making it faster and reduce the amount of code a developer needs to write. The team has made it easier for the developers to concentrate more on the app features instead of code.
We have brought you the noticeable things in Vue 3. To learn more about Vue 3, travel through this article and get to know what is coming in Vue 3?
1) Composition API
Composition API is the new feature of Vue.js. The team has built it to maintain large & complex components & reuse code easily. Find out the advantages of composition API below,
Advantages of Composition API:
- Large components can be easy to maintain & read
In Vue 2 as the components become bigger and complex, they become less readable & maintainable. In Vue 2, the code is split up between two options. First is the return value and the other is component options.
The logical concerns or features of a page can be organized by various components options such as components, props, data, computed, methods and lifecycles. If you are building a large app then you might use at least two or three of them on each page. So, that makes page unreadable.
If each component option code is kept together then our code looks much more organized. With the help of Vue 3 composition API, you can make this possible. It all starts with the new setup() method inside the components.
Inside the setup() function we can start using the new composition API syntax. By the way, this syntax is completely optional, you can continue using the old syntax but if you are working on the large project then giving Vue 3 composite API a try is good for your app.
The syntax of the Vue 3 composite API is:
<script>
export default {
setup() {
return { …a(), …b()
}
}
}
function a() {
}
function b() {
}
</script>
Code reuse pattern
In Vue 2, if you want to extract code from one component into another then you can do it in three ways, Mixins, Mixins factory, scoped slots.
In Vue 3, we have composition functions, the fourth way to use the code again. You can build Javascript functions in a separate file and reuse these files in your Vue components.
It reduces the code since you are familiar with Javascript, it is easier for you to use, and this is extremely flexible at the same time.
if you want to notice the performance, you can jump to binarytotext.net as it will be using Vue 3 composition API once Vue 3 released.
2) Faster
Vue.js is already fast, the community aimed to make it even faster. The team implemented a few new tricks. Evan You, the creator of Vue.js has said that the Virtual DOM rewrite is intended to reduce the time from mounting and patching with almost 100% improvement.
Also, the rewrite should include a more efficient code to create virtual nodes. Along with virtual nodes, the team has worked on optimized slots generation which ensures dependencies are tracked by the correct instance. Wit static tree hoisting, Vue 3’s compiler can skip patching entire trees. So, these major functionalities can make Vue even faster.
3) Smaller
Vuejs is already small however the Vue 3 should come at a half size of that. It eliminates the libraries that you are not using and making it as small as
possible.
4) Easier to target native
Create native apps whit Vue is not that difficult at all but with Vue 3, the runtime core is the platform-agnostic, making it even easier to use this technology with any kind of platform.
5) Typescript Support
Vue 2 had limited support for Typescript but with Vue 3, you can generate new projects that are using Typescript.
Is this change capable of attracting developers to use this framework?
Since Vue.js was already smaller and faster than the other front-end frameworks, these changes might not make that big impact.
But, the composition API is going to make an impact. I have read many developers complaining about the slots and computer properties in Vue.js. With advanced and simple simpler features, composition API can attract developers to give Vue a try.
So, these are the top 5 noticeable features that Vue 3 is going to include. If you have any questions regarding this article, then do let me know.