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
• Multi – Root Components
- 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 is “a 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.