What are the new features of vue3.0

Evan You (You Yuxi) previewed Vue 3 in his keynote speech at Vue Toronto on the morning of November 16, 2018. Leveraging new features supported by modern browsers, Vue 3 will be a powerful and improved version of the Vue.js we already know and love.

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

Faster:

Virtual DOM Rewrite

With Virtual DOM Rewrite , we can expect more compile-time hints to reduce runtime overhead. The rewrite will include more efficient code for creating virtual nodes.

Optimized Slots Generation

In the current Vue version, when the parent component is re-rendered, its child components must also be re-rendered (Updated on November 20: This The sentence is not rigorous and can easily be misleading. I think it is necessary to explain: The re-rendering of 2.0 components is at the component granularity. Unless the modified data is the props of the sub-component, the re-rendering of the sub-component will be triggered. Quote from : https://juejin.im/pin/5bf28ddd6fb9a056783705fc). With Vue 3, parent and child components can be re-rendered independently.

Static Tree Hoisting

Use static tree hoisting, which means that Vue 3’s compiler will be able to detect what a static component is and then hoist it, thus reducing Rendering costs. It will be able to skip the process of patching the entire tree structure.

Static Props Hoisting

Additionally, we can expect static props hoisting, where Vue 3 will skip the patching process that does not change nodes.

Proxy-based observer mechanism

Currently, Vue’s reactive system uses the getters and setters of Object.defineProperty. However, Vue 3 will use ES2015 Proxy as its observer mechanism. This eliminates previously existing warnings, doubles the speed, and saves half the memory overhead.

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

Smaller:

Vue is already very small, about 20kb after compression at runtime. But we can expect it to be even smaller, with the new core runtime measuring around 10kb gzipped. This will be accomplished in large part by eliminating unused libraries (also known as Tree Shaking). For example, if you are not using a transition element, it will not be included.

More maintainable:

While most Vue developers aren’t working on the library itself, it’s nice to know that Vue 3 will bring more maintainability Maintained 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-agnostic, making it easier for Vue to work with any platform (e.g. Web, iOS or Android) use.

Easier to develop and use

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

Tracking re Rendering position will also be easier. In Evan's talk, he did some live coding and showed how to trace a Vue application (using the code below) to find out what triggers a component to re-render. This is useful in larger applications and for performance fine-tuning.

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

Experimental Hooks API

When we need to share behavior between two components in Vue, we usually use Mixins. However, Evan is trying to use the Hooks API to avoid some of the issues from Mixins and be more comfortable 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, resulting in a degraded user experience.

Evan showed how he was trying to use Time Slicing to break down the execution of JS into parts that would be served to the browser if there was user interaction to handle.

The above is the detailed content of What are the new features of vue3.0. For more information, please follow other related articles on the PHP Chinese website!