What’s New in Vue 3?

Composition API can be stated as the individual set of APIs that come together and allow a better understanding of business logic. Composition API is different from Options API in Code architecture organization, focusing on the feature to be developed rather than the lines of code.These color blocks indicate the logical concerns and comparing with Composition API clearly shows that it provides a better organization of logic than the options API

Vuejs is already very fast and introducing Virtual DOM rewrite has made it even faster. It is said that it will drastically reduce the time taken for mounting and patching by 100%.

Static tree hoisting has been introduced in Vue 3 which will allow it to skip patching entire trees during re-renders. Also, it means that unwanted re-renders due to inline functions won’t occur now. Compared to Vue 2, we can expect 100% increase in speed and reduction in memory usage while component mount state.

Vue 3 development team has added a new feature that lets you view and manage your development environment using the Vue GUI tool. You can add new projects, create components, add plugins and perform actions that were possible using the Vue CLI tool before. It is the best tool for beginners who do not have the experience and knowledge of using CLI tools. Also I usually find that GUI tools always provide a better user experience than a CLI tool.

Vue CLI 3 allows you to develop components and test it without any project or configuration. You can develop independent components and run it locally on your local development server for fast prototyping. This feature saves a lot of time for developers by letting them focus on feature development rather than configuration.

Vue 2 is already small and takes 20kb gzipped. Still, while developing large scale applications users have observed that bundle size increased in the development scale which results in slower load time. To eliminate this problem , Vue 3 has added a more modular structure for better plugin imports. This causes more imports but removes the unwanted plugins during bundle build.

And also considering tree shaking the size of the resulting package size for Vue 3 is 10kb gzipped. It will lead to better performance in terms of initial load time and meaningful content paint time for Vue applications.

Typescript’s popularity has increased in the JS community. Among its various interesting features, type enforcement and strict configuration has been widely appreciated. It is said that such restrictions result in generating a stable and robust codebase . Considering the popularity, Vue added TypeScript support in Vue 2 and has promised it would continue to support Typescript even after these major changes in the new version.

In Vue 2 the patching process was already refined and maintained a diff of the DOM tree to only re-render the dynamic nodes. Previously, the child components had to be  re-rendered if the parent component re-renders. In Vue 3 the slot generation has been optimized and now child and parent components can be re-rendered individually.

Semantic organization of code sometimes leads to addition of unwanted html tags that has an impact on node traversal operations in some use cases. In Vue 2< template> notation to support code organization in components. Templates have a limitation that there cannot be two parent elements i.e. div. Vue 3 has added Fragments that allows developers to add multiple divs inside a tag. V-fragment does not show in rendered html and in addition can be styled. It would be helpful to wrap blocks of code according to semantics and logic.

 In some use cases we have to render a component outside our App. Portals provide a safe way to render child nodes into a DOM tree which is outside of the parent Vue app’s DOM . Usually, it is a very patchy process with extra CSS and JS required to inject the component inside the DOM tree. This is going to be a new feature and can be used in Vue 2 as a plugin.

Directives are the special tokens in the markup that indicates Vue to perform some special operations . Vue 2 allows developers to define custom  directives as per their use cases. Previously custom directives had hooks such as inserted() ,update(), componentUpdated(), unbind() which did not clearly  indicate any component lifecycle states. In Vue 3, custom directives have all the component lifecycle hooks such as mounted(), beforeUnmount(), etc. This provides a better semantic organization and understanding for developers.

The developments in Vue 3 clearly highlights the importance of these updates and how it favors the Vue community in future development cycles. Vue is going towards a better development experience and scalable model for improvements, features and suggestions by introducing the Request For Comments(RFC) process. It is really inspiring how Vue is competing against technology giants backed frameworks such as React(Developed by Facebook)  and Angular(Developed by Google).The new Vue 3 moves us towards a better all round experience with Vue.Get a head start now!