Make writing a habit together! This is the 8th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

Vue. Js 3.0

Next, we will continue our study of Vue3.0 from the last section. We will continue to introduce Vue3.0 through the following small points

  • Changes in the way source code is organized
  • Composition API
  • Performance improvement
  • Vite

Performance improvement

Performance improvements in Vue3 can be seen in the following ways

  • Responsive system upgrade
  • Compiler optimization
  • Optimization of source volume

Responsive system upgrade

  • DefineProperty, the core of reactive systems in ve2. X
    • Each attribute of the cabinet passes during initializationdefineProperty 的 get,setTransforms properties of an object
    • Highlight, at initialization time, that is, when you do not use this property, Vue also handles this property
  • Vue3 overrides reactive systems using Proxy objects
    • Proxy objects have inherently better performance than defineProperty
    • Proxy objects can intercept property access, assignment, deletion, and so on
    • There is no need to iterate over every property at initialization time
    • When multiple layers of properties are nested, the layer properties will only be processed if they are accessed
    • You can listen for dynamically added attributes, deleted attributes, and even changes to numeric indexes and length attributes

Compiler optimization

Here we review the process of compiling a component in Vue2

Vue2

  • We know that Vue2 templates need to be compiled into the render function first, which is usually done during the build process. Static root nodes and static nodes are compiled during the build process
  • The static root node requires that there must be a static child node in the node, so Vue2 optimizes the diff process by marking the root node, but the static node also needs to be diff, which is not optimized
  • When the status of the component changes, Watcher will be notified to trigger the update function, and finally perform the patch operation of the virtual DOM, traverse all the virtual nodes, and find the difference and update to the real node
  • Diff compares the entire virtual DOM, first with the old and new divs and their attributes, and then with their children
  • The smallest unit of rendering in Vue2 is a component

Vue3

1. FragmentsSection properties

Vue-template-explorer (Vue3 online)

Vue2 online compilation

Here we remove the outermost static node

You can see

_createElementBlock('div'.null, []) => _createElementBlock(_Fragment, null[]),Copy the code

This code creates a _Fragment, which maintains a tree structure in its outermost layer

2. Mark and promote all static nodes in Vue3, and only need to compare the content of dynamic nodes when diff

Next we open the option to promote static content

We can see that the DOM of several static nodes is all extracted to the outermost layer. These static nodes are only created once when they are promoted, and then we only need to reuse them when we call render.

3. Optimization of dynamic nodes

We are looking at interpolation in the template

<div>
    {{ count }}
</div>
Copy the code

Let’s take a look at the corresponding render code

_createElementVNode("div".null, _toDisplayString(_ctx.count), 1 /* TEXT */),
Copy the code

We can see that the last part has a 1 (1 /* TEXT */ indicates dynamic binding of TEXT content). This is the patch_falg flag. In the future, when we perform diff, the node with the patch_falg flag will be executed

Let’s add a new property to it

 <div :id="id">
    {{ count }}
  </div>
Copy the code

At this point, let’s revisit the code in Render

_createElementVNode("div", { id: _ctx.id }, _toDisplayString(_ctx.count), 9 /* TEXT, PROPS */, _hoisted_4),
Copy the code

1 /* TEXT */ becomes 9 /* TEXT */, PROPS */, _hoisted_4

4. Optimization of events

<button @click="handler">button</button>

_createElementVNode("button", { onClick: _ctx.handler }, "button".8 /* PROPS */, _hoisted_5),
Copy the code

Here we add an event handler to the property via onClick, and then we turn on the caching operation

<button @click="handler">button</button>

 _createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = (. args) = >(_ctx.handler && _ctx.handler(... args))) },"button"),
Copy the code

The render code has changed so that when we render for the first time, it generates a function (… args) => (_ctx.handler && _ctx.handler(… Args)) and we assign the function to handler, and when we call it again later, we get the function from the cache. Avoid unnecessary updates

Optimization of source volume

  • Some of the less commonly used apis have been removed from Vue3
    • Inline-template, filter, etc
  • Tree-shaking dependencies are better, and importing on demand is better.

The next chapter

We’ll talk about Vite in the next chapter. Are you ready? Study together?