Vue 3.0 – based on the reports, it looks faster, smaller, and easier to maintain than before and much more. We take a look at what’s ready for release, what needs more work, and how we’ll tackle the road ahead to Vue 3.0!

Vue.js 3.0 features

Vue 3 will be an improved evolution of the Vue.js we already know and love. It’ll take advantage of new abilities in modern browsers for better performance and use.

In general, the goal is a smooth transition over to Vue 3. No one wants a bumpy upgrade, least of all Evan You and the Vue team.

Let’s have a closer look at the main features of the 3.0 release.

As less configuration as possible

Vue CLI 3.0 aims to save you from unnecessary plumbing by making sure that all its features work nicely together. More precisely, the list of what the latest release offers includes:

• Rich built-in features – Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.
• Extensibility – The plugin system allows the community to build and share reusable solutions to common needs.
• Configurability with no need to eject – When you scaffold a project via Vue CLI 3, it installs the Vue CLI runtime service (@vue/cli-service), selected feature plugins, and generates the necessary config files for you. In most cases, you just need to focus on writing the code.
• Graphical User Interface – Create, develop and manage your projects through an accompanying graphical user interface.
• Instant prototyping  It isn’t fun to wait for npm install before you can write any code. With Vue CLI 3’s vue serve command, this is all you need to do to start prototyping with Vue single-file components.
• Versatility and future-ready – You can effortlessly ship native ES2015 code for modern browsers, or build your Vue components as native web components.

Faster

Vue is already fast, but the team plans to make it even faster with a few new tricks. First off, the Virtual DOM rewrite is intended to shave off time from mounting and patching, with up to 100% improvements. More compile-time hints will reduce runtime overtime.

Additionally, the rewrite should include more efficient code to create virtual nodes.

The Optimized Slots Generation is designed to ensure dependencies are tracked by the correct instance. Right now, when a parent component re-renders, its child has to as well. In Vue 3, the parent and child can be re-rendered separately.

Thanks to the new static tree hoisting, Vue 3’s compiler can skip patching entire trees. It should work with multiple occurrences. It should also reduce the cost of rendering since the compiler will be able to detect what is static and then hoist it out. For the static props hoisting, it will now be able to skip patching the node itself and patch the children.

More importantly, the new proxy-based observation is estimated to double the speed and use half the memory for Vue’s reactivity system. Designed to use the ES2015 proxies, the new system removes any previously existing caveats, which accounts for the improved performance. However, Vue 3 will still support IE11 with the old observation method.

Smaller

Vue is already pretty dang small, weighing in at around 20kb gzipped. However, this new release should come in at half that, with a constant baseline size of <10kb gzipped. How? Mostly by eliminating the libraries, you’re not using, like Tree Shaking. If you don’t use the element, it’s not included.

Easier to use and maintain

Vue 3 will support TypeScript. Additionally, packages will be decoupled, making everything more modular and easier to maintain.

Vue 3 is also platform agnostic, so developers can utilize it with their favorite Web, iOS, or Android technologies.

Experimental features

While this is far from a complete list, right now we have two new experimental features:

• Hooks API – This API is designed to avoid some of the gotchas with Mixins that get developers when they try to share behavior between components in Vue. It should fit better with idiomatic Vue code.
• Time Slicing Support – By breaking up JS execution into segments, the browser should be able to handle re-rendering components easier.