The former framework underdog from the JavaScript cosmos is now available in version 3.0 – and after two years of development comes up with a completely renewed framework architecture and a React Hooks-like composition API.
Vue.js is one of the most popular JS frameworks alongside React, Svelte and Angular. It was originally developed by Evan You, who wanted to use it to create his own, less complex alternative to Google’s Angular. In 2014, the developer decided to publish his project so that other outsourcing developers could also participate. The framework underdog is now very popular in the web developer community with 1.3 million users and is used both in developing so-called single-page apps and in building websites that are traditionally rendered on the server. Now, almost two and a half years after the release of version 2 and over 30 RFC and 628 PR later, the third major release is available with “One Piece”.
New Composition API – React Hooks anyone?
One of the most important changes is the new Composition API – this should eliminate pain points when working on large Vue applications. The Composition API is based on the Reactivity API. Based on the hooks from Facebook’s React, the composition API makes it possible to save logics in so-called composition functions. These can then be reused across components. The Composition API also offers more flexible code organization and more robust type inferences than the object-based API from version 2.x.
If you want, you can also use the API with Vue 2.x via the @ vue / composition-api plug-in. Associated utility libraries such as vueuse and vue-composable work for both Vue 2 and Vue 3. You can read all the details in the API reference.
The Virtual DOM has been rewritten from the ground up. The result: performance improvements and improved support for TypeScript.
A portal is a concept borrowed from React that you could already use in Vue 2 – but so far only via third-party plugins such as portal-vue. This functionality is also available natively in V3. Such a portal enables a component to be rendered elsewhere in the DOM tree, even outside of the app scope. For portals, for example, it is used in connection with notifications and pop-ups.
Also based on React is Vue-Suspense, an experimental feature that is already included in Vue 3, but will probably only be documented and officially available in version 3.1. According to the release notes, the Vue core team is in lively exchange with the Nuxt.js team. The <Suspense>-Component allows, analogous to Reacts Suspense, to so-called nested-async-Dependencies to wait. A typical use case would be for your app to display a loading indicator until user data has stopped fetching.
<Suspense>
<template #default><UserProfile />
</template>
<template #fallback>
<div>Loading… </div>
</template>
</Suspense>
Changed global mounting behavior
Until now, Vue used the global Vue object to specify plugins, for example. In Vue 3, Vue instances can be made available separately with different plugins.
All other new features, information on migrating from Vue 2 to 3 and plans for upcoming releases can be found in the release notes. If you are interested in the development process of the new version in detail, please refer to Evan You’s blog post on the development of V3.
More on the subject:
