Evan You previewed Vue 3 during his keynote address in Vue Toronto the other morning.

Taking advantage of the new features supported by modern browsers, Vue 3 will be a powerful and improved version of the vue.js we’ve come to know and love.

We took some notes and shared them with the slides below.

To sum up, Vue 3 is worth looking forward to in the following aspects:

  • faster
  • smaller
  • Easier to maintain
  • More native support
  • Easier to develop and use

The complete PPT: docs.google.com/presentatio…

Evan and the Vue team’s goal was to make the transition to Vue 3 as smooth as possible, and in the process, these changes invisibly improved the framework.

Let the Vue faster

While Vue is already very fast, Evan thinks Vue 3 will be even faster. How to do that…

Virtual DOM Rewrite

As the virtual DOM is rewritten, we can expect more compile-time hints to reduce runtime overhead. The rewrite will include more efficient code to create virtual nodes.

Optimized Slots Generation

In the current version of Vue, when the parent component is re-rendered, its children must also be re-rendered (Update, 20 November: This is an imprecise and very misleading statement, and I think it’s worth saying: The re-rendering of 2.0 components is component-granular, and only the modified data is the props of the child components that trigger the re-rendering of the child components.

Quote from:

Juejin. Cn/pin / 6844910…

With Vue 3, parent and child components can be individually rerendered.

In Static Tree ascending case, apply as follows:

Use static tree promotion, which means Vue 3

The compiler will be able to detect what a static component is and then elevate it, reducing rendering costs. It will skip the process of not patching the entire tree structure.

Lifting Static properties (Static Props)

In addition, we can expect static property improvements, where Vue 3 will skip the patching process that does not change nodes.

Proxy-based observer mechanism

Currently, Vue’s response system uses getters and setters for Object.defineProperty. However, Vue 3 will use ES2015 Proxy as its observer mechanism.

This eliminates pre-existing warnings, doubles the speed, and saves half the memory overhead.

To continue support for IE11, Vue 3 will release a build that supports both the old observer mechanism and the new Proxy version.

The Vue

Vue is already very small, about 20KB compressed at runtime. But we can expect it to get even smaller, with the new core runtime compressed to about 10KB. This will be done largely by eliminating unused libraries (also known as Tree Shaking). For example, if you do not use the transition element, it is not included.

Below you can see how the Hello World application compares to its compressed size.

Make it more maintainable

While most Vue developers aren’t working on the library itself, it’s good to know that Vue 3 will bring more maintainable source code. Not only will it use TypeScript, but many packages will be decoupled, making everything more modular.

More native support

The runtime kernel will also be platform independent, making Vue easier to use with any platform, such as Web, iOS or Android.

Easier to develop and use

The Observer module has been unpacked into its own package, allowing you to use it in new ways:

It will also be easier to track the location of the rerender. In Evan’s talk, he did some real-time coding and showed how to trace the Vue application (using the code below) to find out what triggers the component to rerender. This is useful in larger applications and performance fine-tuning.

Vue 3.0 will also improve TypeScript support, allowing advanced type checking and useful errors and warnings in the editor.

Experimental Hooks API

Mixins are often used when we need to share the behavior between two components in a Vue. However, Evan is trying to avoid some of the problems from Mixins by using Hooks apis, and is better suited to using idiomatic Vue code.

Experimental Time Slicing support

When you have many components trying to re-render at the same time, any browser can start to slow down and degrade the user experience.

Evan showed how he tried to use Time Slicing, breaking up THE JS execution into parts that would be provided to the browser if there was user interaction to handle.

summary

It’s good to see that Vue is more competitive, modular, easier to debug and more fun to develop. There’s no specific release date for all of this other than “late next year.

Looks like we can take a break for a while