The new features of vue3.0 are: 1. Performance is 1.2 to 2 times better than vue2.x block; 2. Support tree-shaking; 3. Introduction of Composition API; 4. Exposed custom rendering API; 5 , three new components (Fragment, Teleport, Suspense), etc. are added.
The operating environment of this tutorial: windows7 system, vue3.0 version, DELL G3 computer.
Six new features brought by vue3
- Performance: 1.2 to 2 times better than vue2.x block
- Tree shaking support : Support on-demand compilation, smaller size
- Composition API: Combination API, similar to React Hooks
- Custom Renderer API: Exposed custom rendering API
- Fragment, Teleport ( Protal), Suspense: Three new components
- Better TypeScript support: Better support for TS
Performance
Vue3.0 In terms of performance, it is 1.2 to 2 times faster than Vue2.x.
Three-shaking support
Vue3.x The core APIs all support tree-shaking. These APIs are introduced through packages rather than injected directly during instantiation. Only the functions or features used are packaged (on-demand packaging), which means more functions and smaller size.
Composition API
In Vue2.x, we usually use mixins to reuse logic code. Although it is convenient to use, there are also some problems: the source of the code is not clear , method attributes may conflict. Therefore, Vue3.x introduced the Composition API (composition API), which uses pure functions to divide and reuse code. Similar concept to React Hooks.
- Better logic reuse and code organization
- Better type inference
##Fragment, Teleport, Suspense
Three new components are added.
Fragment
When writing Vue2.x, since the component must be a root node, some meaningless nodes are often added for wrapping. The Fragment component is used to solve this problem (this is the same as the Fragment component in React).
Teleport
Teleport is actually the Portal in React. Portal provides an excellent solution for rendering child nodes to DOM nodes that exist outside the parent component.
A typical use case for a portal is when the parent component has an overflow: hidden or z-index style, but you need the child component to visually "jump out" of its container. For example, dialog boxes, floating cards, and prompt boxes.
Suspense
Again, this is the same as Supense in React.
Suspense lets your component "wait" before rendering and display the fallback content while waiting.
Better TypeScript support
Vue3.x is rewritten in TypeScript. Developers can fully experience the convenience that TS brings to coding when using Vue3.x.
Custom Renderer API
This API defines the rendering rules of the virtual DOM, which means that using a custom API can achieve cross-platform purposes.
Finally: How does Vue3.0 become faster?
- diff algorithm optimization
The virtual dom in Vue2 is compared in full
- Vue3 adds static tags
- hoistStatic static promotion
In Vue2, regardless of whether the element participates in the update, it will be recreated every time, and then in rendering
- Vue3 for Elements that do not participate in updates will be statically promoted and are only created once and can be reused directly during rendering
- cacheHandlers event listener cache
By default, onClick will be regarded as dynamic binding, so its changes will be tracked every time. However, because it is the same function, there is no tracking of changes. It can be cached and reused directly.
- #ssr rendering
When there is a large amount of static content, the content will be pushed into a buffer as a pure string, even if there is dynamic content The binding will be embedded through template interpolation, which will be much faster than rendering through virtual dom.
- When the static content reaches a certain level, the _createStaticVNode method will be used on the client. Generate a static node. These static nodes will be directly innerHtml, so there is no need to create objects and then render them based on the objects.
For more programming related knowledge, please visit:
Programming Video! !
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!
