Get ready to celebrate because, as of Friday, September 18, 2020, Evan You, creator of Vue.js, announced Vue 3 is officially released. Here are some of the exciting features that are now available.
The biggest reason to upgrade to Vue 3 is that you will have an immediate performance gain. Vue 3 has a brand new, faster, virtual DOM.
Vue 3 solves this problem with the composition API. The composition API is similar to React hooks in that it allows you to reuse your code functionally. You can import the functions that you want and work them before your component is mounted in the new
setup lifecycle method.
No more single root elements! You can now write code in your component and not have to worry about making sure it is all nested in a
div or root element. This is going to make it so much easier to work with components. In Vue 2, I would have to wrap so much of the code in templates just to get around this limitation of having one root element.
Vue 3 allows you to use multiple v-models on an element. The
v-model syntax has changed slightly. This new approach will allow new patterns for forms that will be easier to understand.
Working with modals is a breeze with the new feature teleport. You can send data from deeply nested components to the parent or another part of your app. This is a common problem I ran into using modals where the logic for the modal is in a child component, but the modal needs to display in a specific place in the parent, to avoid z-index issues (or to not look weird). This feature works by wrapping the data you want to send in a teleport and then using an id or class to target where you are sending what’s inside the teleport.
suspense gives developers a better way of adding loading state to elements. One pattern that I have run into is loading data from an API; I would use
v-if the data isn’t loaded, to show a loading spinner. Using
suspense, you can simplify this process by wrapping your async data element in
<suspense>. You then use two templates with
<template #default> or
<template #fallback>. The default template is what you want the component to look like when the data is loaded, and the fallback is where you would put your loading spinner.
I am excited about the release of Vue 3! The changes that were made will make learning Vue a little harder, with some of the functional programming aspects of the composition API. The benefits of having more reusable code are worth the complexity, in my opinion. Having the ability to use multiple root elements and v-models, will make it easier to work with. The teleport feature and suspense will make it easier to keep up with the demands of a web app.