Vue.js v3.0.0 One Piece Released

Vue.js has released new version 3.0.0 that named as one piece. Vue.js v3.0.0 framework provides improvements of performance, Bundle size optimization, Good Typescript integration, New API and solid foundation.

Vue.js v3.0.0 took almost 2 years of development efforts. Many contributors supported to grow this framework faster.

So, let’s take a look at the improvement done by Vue team,

Layered internal modules

Vue.js v3.0 you can still use by adding a script tag. But further internally they have divided into the chunk of modules which basically provides maintainability and we can also reduce the size. It exposes API that helps us to use many advanced use cases.

• The compiler supports custom AST transforms for build-time customizations (e.g. build-time i18n)
• The core runtime provides API for creating custom renderers targeting different render targets (e.g. native mobile, WebGL or terminals). The default DOM renderer is built using the same API.
• The @vue/reactivity module exports functions that provide direct access to Vue’s reactivity system, and can be used as a standalone package. It can be used to pair with other templating solutions (e.g. lit-html) or even in non-UI scenarios.

New APIs of Vue.js v3.0

Vue 3.0 introduces the Composition API – a new set of APIs that can be used for large scale applications. The Composition API builds on top of the reactivity API and enables logic composition and reuse similar to React hooks.

API can also be used with existing Vue 2.x via the @vue/composition-api plugin, and there are already Composition API utility libraries that work for both Vue 2 and 3 (e.g. vueuse, vue-composable).

Performance Improvements

Vue 3 claims that bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 54% less) than Vue 2.0.

In Vue 3 it uses compiler-informed virtual DOM that compiles for the better optimization. So, here the user has both the options to a compiler-optimized performance from templates, or direct control via manual render functions when the use case demands.

Better TypeScript integration

Vue 3’s codebase is written in TypeScript, with automatically generated, tested, and bundled type definitions so they are always up-to-date. Composition API works great with type inference. 

They have created Vetur VSCode extension that can help us to supports template expression and props type checking leveraging Vue 3’s improved internal typing. 

You can also use typings of Vue 3 based on your preference.

Next Vue.js Roadmap

• Migration build
• IE11 support
• Router and Vuex integration in new devtools
• Further improvements to template type inference in Vetur

So, Here is what you all need. start learning Vue.js v3.0 and create something useful out of it.