Preface:

It’s been a while since Vue3 was released, and I’m sure a lot of people have started using it, but why do I have to learn Vue3?

  • Performance thanvue2.x1.2 to 2 times faster
  • Compiled on demand, volume ratiovue2.xsmaller
  • Composition API (similarReact Hook)
  • Better TS support
  • Exposed custom rendering apis
  • supportTree-shaking

How is Vue3 performance improved?

Responsive system promotion

  • DefineProperty, the core of the reactive system in Vue2.0, iterates through all the members of data during initialization. It converts the attributes of the object into getters and setters. If the members of the object are objects, each attribute needs to be processed recursively. Because defineProperty is initialized, attributes that are not used are also reactive

  • In Vue3.0, Proxy objects are used to rewrite Es6 used by reactive systems, and the performance of Proxy objects is better than defineProperty. In addition, proxy objects can intercept property access, assignment, deletion, and other operations, without traversing all properties during initialization. The other layers of nested properties only recursively process the next layer of properties when they are accessed

    • You can listen for dynamically added attributes, which need to be handled by calling vue.set() in Vue2.0
    • You can listen for attributes to be deleted. Vue2.0 cannot listen for attributes to be deleted
    • You can listen for the index and length properties of an array. Vue2.0 does not listen for operations on these two properties

Using proxies improves responsive performance and functionality

Compile-time performance optimization for the virtual Dom

The virtual DOM in vue2. X is used for full comparison. Vue3.0 added static tags. When comparing with the last virtual node, only the node with the patch Flag is compared, and the specific content of the current node to be compared can be known according to the flag information.

Here’s an example. Here’s the code snippet.

<div>
  <p>The label</p>
  <p>{{msg}}</p>
</div>Copy the codeCopy the code

The diff algorithm of VUe2. X is the comparison of the whole virtual DOM tree.When creating a virtual DOM, vue3.0’s diff algorithm adds static tags according to whether the content in the DOM changes. Only nodes with patch flags are compared.

hoistStatic Static node upgrade

In vue2. X, elements are recreated and rendered each time, regardless of whether they participate in the update or not. For elements that do not participate in the update, vue3.0 will do static promotion. They will only be created once and can be reused directly during rendering.

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.

Tree-shaking

When it comes to tree-shaking, the official explanation is, in plain English, that code that is not being used is automatically removed when compiled.

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.

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

Author: chenuvi

Email address: [email protected]

Reference content:

Vue3 official website tutorial

Vue3.0 series — “How does Vue3.0 performance get Faster?”

Vue 3.0 enterprise project actual combat

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event