According to Yu Yuxi’s speech on VueConf2019, summarize the thoughts of Virtual DOM reconstruction and optimization in Vue3.0.

Vue3.0 design objectives

  • smaller
  • faster
  • Enhance TypeScript support
  • Strengthen API design consistency
  • Improve their maintainability
  • Open up more low-level functionality

How fast?

  • Object.defineProperty -> Proxy

  • Virtual Dom refactoring

  • More compiler optimizations:

    • Slot is compiled as a function by default
    • Momomorphic vnode factory
    • Compiler-generated flags for vnode/children types

Virtual Dom refactoring

Performance bottlenecks of the traditional Virtual DOM

After the data is changed, the patch algorithm of the new Virtual DOM and the old Virtual DOM is compared, and the differences between them are calculated and modified. However, in traditional Virtual DOM, granularity is a component in algorithm comparison, and each component is a particle.

While Vue can minimize the number of components that trigger updates, the entire Virtual DOM tree of a single component needs to be traversed internally.

The performance of the traditional Virtual DOM is positively related to template size, not the number of dynamic nodes. As large as the template or component is, the performance of data updates will be wasted, but in practice, this approach is underutilized. As shown in the figure above, in the above template, only the interpolated part of Message is changed. The overall structure remains the same, but when data is updated, the whole template structure is compared, so there is a performance loss.

So in the case that some components have only a small number of dynamic nodes in the entire template, the traditional method of traversal has a waste of performance.

Vue3.0 Virtual DOM

Dynamic and static combination: find the part that changes dynamically, compare only the part that can change when updating, reduce performance loss.

Three types of

Nodal structure invariant

The simplest case:

  • The node structure does not change at all
  • There is only one dynamic node

There is no need to compare structural order at this time.

Node structure changes v-IF

  • V-if external: Only V-if is a dynamic node
  • Inside the V-if: only {{message}} are dynamic nodes

Cut the template into two relatively static sections.

Node structure changes v-for

  • External v-for: Only V-for is a dynamic node (fragment)
  • Inside each V-for loop: only {{item.message}} are dynamic nodes

Block tree Block tree

With structural instructions as the boundary, the entire template is cut into a relative internal static block.

  • The template is cut into nested blocks based on dynamic node instructions.
  • The structure of nodes within each block is fixed.
  • Each block only needs to track the dynamic nodes it contains in an Array.

After the upgrade

The new strategy improves the Virtual DOM update performance from being related to the overall size of the template to being related to the number of dynamic content.

Welcome to pay attention to my public number, thank you!