DEV Community

loading...

Trending Top Features of Vue 3 that you should know in 2021

Aditya Goswami
・4 min read

It has been almost a year since the release of Vue 3, yes way back on September 18, 2020. Vue 3 brings some advanced and wonderful features in web development. These new updates of Vuejs improve the design of the frontend and make the life of developers easy.

If you are not ready to do the updates to Vue3, you will get some of the features of Vue3 as a plugin for your Vue2 and I will let you know about that too. You will get these advanced features built-in in Vue3, which gives a developer a better working experience.

You should be aware that Vue is an interface framework for web applications, and not just another framework. Vue helps you to develop a better View for your web application. You can use Vue with Angular and React, these two are monolithic frameworks.

Let’s See New Features in Vue 3

The Composition API

You might be aware of the Vue options API if you already have worked with Vue before, So The composition API is just an alternative to it. With the typescript support in mind, it was designed. It also keeps in mind the reuse of the code, amalgamation of functionality, and maintainability by logical concern.

Now you might be wondering how it is compared to Options API? Right? But things can get messy quickly if you use options API in simple components as you have methods, data, computed values and more. Every section has their own set of functionality and now it spreaded in different sections between your code.

But if you want to make it more readable and maintainable, you must go with the Composition API. It's work on setup methods, which works as below.

import { ref } from "@vue/composition-api"
export default {
setup () {
const theNumber = ref(1)
function doubleTheNumber () {
theNumber.value = parseInt(theNumber.value) * 2
}
return {
theNumber,
doubleTheNumber
}
}
}

You can also use composition functions in other files, and this is the kind of advantages of code reuse and separation.

Full TypeScript Support

One of the best things about the Vue 3 is it comes with full support of TypeScript while the old version of Vue was able to accommodate TypeScript. It looks like it was hacked together and was never a best arrangement.

Great things about the Vue3 is that it is written with TypeScript and API that it has, have been the same in JavaScript and TypeScript.

Fragments

The concept of Vue3 is very similar to React and one is Fragment, known as Multiple roots nodes. If you work with vue2 before, you might know that you have only access to one root element in components. Function of fragments is to address it and allow developers to use multiple root nodes in components.

Multiple root nodes is very simple. But you just need to be sure that if you need to use attribute inheritance, you must identify which of the root components should inherit.

Multiple v-Models

If you work with Vue.js development services, you must be aware of what a v-model is. If you want to achieve two-way binding for components then it is a directive. But many of you might be aware that v-model is a kind of shortcut to pass the listening and value to the input.

So, now the doubt is what “multiple v-models” brings? In Vue.js development if the situation is where you need to listen and bind to multiple properties in your components. Let’s try to understand with examples, if you develop new components with values having Surname and Forename(s). You need a v-model for both of these values and here multiple v-models kick in.

v-model:fornames="forname"
v-model:surname="surname"
/>

Custom Directive API

Being a Vue.js developer, you must have understanding about the directive. We have seen the built-in directive when we talked about the V-model but there are more like v-show.

One of the things about the directives that changed in Vue3 is that In Vue2 you can develop custom directives. In Vue3, Directive API has different and own lifecycle methods, which does not match with the normal Vue lifecycle, update, Bind,componentUpdated, inserted, and unbind.

You will get a more standard Vue lifecycle with Vue3, you will get mounted, beforeUnmount, beforeMount, updated, beforeUpdate, and unmounted. It is much easier to understand while developing your application.

The End

As I mentioned earlier in the article, it's been a year since Vue3 released , and you can use Vue3 for your project right away. Vue3 will help you to develop faster and better systems with its rich features. It has some quality to reduce the burden of developers and improve life, and has multiple ways for developing applications. Which makes developers excel and bring enjoyment to their profession.

But things need to be noted that Vue3 is backward-compatible. It just added some new ways of development and doesn’t cancel the existing one. If you want to take advantage of new features of Vue3, contact the Best Vue.js development company and hire Vue developer to develop your project faster and standards

Discussion (0)