Open In App

What’s new in Vue 3?

Improve
Improve
Like Article
Like
Save
Share
Report

Vue is a Progressive Javascript Framework for building UI and single-page applications. It is an open-source Model-View-ViewModel (MVVM) framework. The core framework is primarily focused on the view layer and it can be easily integrated with other libraries and projects. Using modern tooling and supporting libraries, Single-Page Applications (SPA) can be easily handled.

Vue 3: Vue 3 is going to be a milestone in the world of modern web development as a JavaScript developer. Vue.js 3.0 was released on 22 July as Release Candidate and brings a lot of new exciting features along with it. The API and implementations are stable now. Soon it will be officially released.

Vue 3 is smaller, faster, more maintainable, equipped with better TypeScript support, and easier to target native.

Features: Some new features of Vue 3 which make it more convenient for use are:

    • Performance Enhancement

    • Composition API

    • Portal

    • Multi – Root Components

    • TypeScript

Performance Enhancement:

  • Smaller: Vue 3 is Smaller. It is tree shaking-friendly, which means it allows to only import the pieces of the library that is needed, and unnecessary code is removed. The core runtime has reduced to ~12kb, gzipped.
  • Faster: Vue 3 is Faster. The Virtual DOM (Document Object Model) has been rewritten from the ground-up with a new Diffing Algorithm to make it for faster mounting, patching, and faster rendering time.

Composition API: It is one of the greatest features coming in Vue 3. Composition API was available as a plugin in Vue2, but it’ll be baked-in in Vue 3. Currently, we build components with Options API, which made large components difficult to maintain and manage. 

According to Vue core team, Composition API isa set of additive, function-based APIs that allow the flexible composition of component logic. It allows the better organization and reuse of the code.

Portal: Teleport or Portal is a new feature that allows us to render the part of code from one component to another component in a different DOM tree. It is one of the features which is already implemented (natively) in React. Using portals, we can easily deal with modals, popups, and the components which appear on the top of the page. We can get relief from the nasty use of z-index, which we use to avoid CSS overriding of host components. 

The portal feature was present as third party library in Vue 2, but now it will be as an inbuilt feature and can be used by using the tag <Teleport>

Multi – Root Components: As for now, Vue templates can have a single tag, i.e. one root element. Even if we want two <p> tags as the sibling tags, we had to enclose them within a <div> tag. But, in Vue 3, this restriction is lifted and there’s no need to use the root element. We can now use as many sibling tags as we want inside the <template> tag.

TypeScript: Vue started TypeScript support in late 2.0 releases and it continues in Vue 3 also. The source code of Vue 3 is completely written in TypeScript, hence the compositional API gets enhanced support. But also, it is optional.

Apart from all these major features, Vue 3 covers a lot of smaller improvements as well. Many features that were available as third-party libraries are now included in the core of the framework of Vue 3. It is packed with a lot of amazing and new features. With all these interesting features, the performance is fine-tuned, and the developer experience becomes simpler and better.


Last Updated : 21 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads