Recently, Vue author Yuxi You shared six highlights of Vue3.0 in his speech at STATION B:

  • performance
  • The Tree – shaking support
  • Composition API
  • Fragment, Teleport, Suspense
  • Better TS support
  • Custom render API

Compile-time performance optimization for VDom

PatchFlag

The template has three P tags, and only the TEXT part of the last P tag is dynamic

In previous VDOM, if the MSG value changed, all elements in the entire template had to be re-rendered. But in Vue3.0, when the template is compiled, the compiler adds /* Text*/ PatchFlag at the end of the dynamic label. Only nodes with patchFlag are considered dynamic elements and property changes are tracked. In addition, PatchFlag will identify the dynamic attribute types. For example, TEXT here indicates that only the TEXT in the node is dynamic.

Each node in a Block, no matter how deep, is bound directly to the Block layer, and can jump directly to the dynamic node without traversing layer by layer.

Both the flexibility of VDOM and performance guarantee.

hoistStatic Static node upgrade

When using hoistStatic, all static nodes are promoted outside of the Render method. This means that they are created only once when the application is launched and reused with each rendering.

There are significant optimizations for memory in large applications.

The cacheHandler event listens for the cache

Normally, when binding an event:

<div> <p @click="handleClick"> static code </p> </div>Copy the code

The template will be compiled to

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div".null, [
    _createVNode("p", { onClick: _ctx.handleClick }, "Static code".8 /* PROPS */["onClick"]]))}Copy the code

Where events are retrieved from the global context each time. When cacheHandler is enabled

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div".null, [
    _createVNode("p", {
      onClick: _cache[1] | |(_cache[1] = ($event, ... args) = >(_ctx.handleClick($event, ... args))) },"Static code")))}Copy the code

The editor dynamically creates an inline function for you, which then feeds the latest handler for the current component. The editor then caches the inline function. If the event handler does not change each time the render is rerendered, the event handler in the cache is used instead of being refetched. This node can be considered a static node. This optimization is even more useful because when it is applied to a component, each previous re-rendering will result in a re-rendering of the component, and will not result in a re-rendering of the component after passing through the handler cache.

SSR server rendering

When SSR is turned on, if we have some static tags in the template, these static tags will be directly converted to text.

The dynamic binding is still embedded in a single string. This performance is certainly much faster than when React was converted to VDOM for HTML.

StaticNode StaticNode

I mentioned that static nodes in SSR are converted to pure strings. On the client side, when static nodes are nested enough, the VUE compiler also converts the VDOM to plain string HTML. StaticNode namely.

With these operations, we can see that it is more than twice as fast as vue2, and the memory footprint is more than twice as small.

Tree Shaking

Because ES6 modules are statically referenced, we can determine exactly what code is loaded at compile time. Do a global code analysis to find unused modules, functions, and variables and eliminate them.Copy the code

When using a bundle (webpack etc.), TreeShaking is added by default. Modules that are not used in Vue 3.0 can be removed by TreeShake without being packaged into compiled files. Vue3 packs 13.5KB when there is only one HelloWorld. When all the components are loaded in, they are 22.5 KB

Composition API

As Vue components grow larger, the code inside them becomes more difficult to understand and maintain. Some of the reusable code is hard to isolate. Vue2.0 also lacks TS support. In Vue2, logical concepts (functions) are managed in components, but functions and components do not have a one-to-one relationship. A function can be used by multiple components and a component can have multiple functions at the same time. In Vue, a function may rely on multiple Options (components, props, Data, computed, Methods, and lifecycle methods).

Provide setup-able methods in the Composition API. Take a component with search and sort capabilities as an example:

<script>
export default {
    setup() {
    
    }
}

function useSearch() {
    return{... useSearch(), ... useSorting() } }function useSorting() {}</script>
Copy the code

Code reuse in Vue2

Mixin

There are several ways to reuse code in Vue2, one of which is Mixins.

  • Mixins can be organized
  • Prone to conflict
  • Dependencies are hard to explain
  • Code is not easy to reuse

Mixins factory

  • It’s easy to reuse
  • Explicit dependencies
  • Weak namespace
  • Implicit attribute addition

Scoped Slots

  • Solve the Mixin problem
  • Increased hierarchy makes it harder to understand
  • Lots of configuration information
  • Less flexibility
  • Poor performance

Core API

  • reactive
  • ref
  • computed
  • readonly
  • watchEffect
  • watch
  • Lifecycle Hooks

Fragments

Vue3 does not require templates to be followed by only one node. The nodes and render functions can return plain text, arrays, and individual nodes, which are automatically converted to Fragments if they are arrays.

Teleport

React Portal. You can do some responsive design. If the screen width is wide, add some elements and remove the screen when it becomes narrow.

Suspense

Wait for nested asynchronous dependencies. Before rendering a nested component tree to the page, render it in memory and keep track of all components that have asynchronous dependencies. The entire book is rendered into the DOM only after all asynchronous dependencies have been resolved. When you have an Async setup function in your Component, the Component can be treated as an Async Component, and the entire tree will be rendered only if the Component is resolved

  • async setup()
  • Async Component

Typescript

The Vue3 source code is rewritten using TS, but this does not mean that Vue3 projects should use TS. But Vue3 will have better support for TS

  • Support the TSX
  • Support Class component
  • The code will be bigger

The resources

  • Original video link
  • Vue Composition official document
  • View Vue compiled code widgets