Vue 3 “One Piece” is there, and has learned a lot of React

The former Framework Underdog from the JavaScript cosmos is now in Version 3.0 available – and after two years of development with a completely renewed Framework architecture and a React-Hooks-similar Composition API.

Vue.js is in addition to React, Svelte, and Angular is one of the most popular JS Frameworks. Originally, it was developed by Evan You, who wanted to create his own, less complex Alternative to Google’s Angular. In 2014, the developers decided to release his project, in order to let other developers to be a part of. In the meantime, the Framework Underdog pleased with 1.3 million users great popularity in the developer Community, and server-side rendered Websites, both when Developing a so-called Single-Page Apps, as well as in construction traditionally used. Now, nearly two and a half years after the Release of Version 2, and about 30 RFC and 628 PR later, is a “One Piece” is the third Major Release available.

New Composition-API – React-Hooks, anyone?

One of the most important Changes in the new Composition API is Pain-Points are supposed to be at work on large Vue applications is eliminated. The Composition API is based on the Reactivity API. Based on the Hooks from Facebook’s React, the Composition API allows to store the logic in the so-called Composition-Functions. These can then be used across components re-used. The Composition-API offers a more flexible Code organization and more robust types of inferences as to the object-based API from Version 2.x.

Who wants to, can the API in the @vue/composition-api-Plugin with Vue 2 x use. Associated Utility libraries such as vueuse and vue-composable function for Vue 2 Vue 3. All the Details you can read in the API Reference.

New Virtual DOM

The Virtual DOM has been written from scratch. The result: performance enhancements, and improved support for TypeScript.

Native Portals

A Portal from React borrowed concept that you already use in Vue 2 is – so far, however, only about Third-Party Plugins, such as, for example, portal-vue. In V3, this functionality is also natively available. Such a Portal allows you to render a component elsewhere in the DOM Tree, even outside the App-Scopes. For portals, using, for example, in connection with Notifications and Pop-ups.

Suspense

Also to React Vue-Suspense, an experimental Feature that is already included in Vue 3, but most likely only in Version 3.1 documented and officially available is ajar. According to the Release Notes of the Vue core team is located in a lively exchange with the Nuxt.js Team. The <Suspense>Component allows analog-to-Reacts Suspense, so-called nestedasyncWait-Dependencies. A typical Use-Case would be that your App displays a Loading indicator until the Fetch of user data is completed.


<Suspense>
<template #default>

<UserProfile />

 

</template>
<template #fallback>
<div>Loading… </div>
</template>
</Suspense>

 

Changes In The Global-Mounting Behavior

So far, Vue took advantage of the global Vue object to specify, for example, Plugins. In Vue 3 Vue can be instances of different Plugins available separately made.

All of the other new features, information about the Migration from Vue 2, 3, and plans for upcoming Releases in the Release Notes read. Anyone who is interested in the development process of the new Version in Detail, reference is made to Evan You’s blog post on the history of V3.

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png