Analysis of Vue diff algorithm

I. Introduction

As one of the mainstream frameworks at this stage, Vue is used by many projects to build project front-end modules. This article mainly introduces the algorithm used in the virtual DOM comparison that occurs when the page is rendered in Vue, so that everyone can understand Vue better.

2. Introduction

MVVM, that is, model, view, view-model, business layer, view layer and the binding layer of the two, the design of Vue refers to this architecture.

<h1>{
   
   {title}}</h1>
​
<script lang='ts' setup>
    const title = 'this is title'
</script>

In Vue, <h1>tags are managed by the view layer, but const title = 'this is title'by the model layer. What the view-model layer has to do is to keep the two data in sync. To update the label data it is necessary to re-render it.

Since the rendering of responsive data changes has old vnodeexistence, Vue needs to maximize the reuse of the created DOM elements, and the premise of reuse is to vnodecompare the old and new to find out the content that needs to be updated, and minimize the to replace. Update process:

1. Modify the data to trigger the setter, call Dep.notify to notify all subscribers Watcher;

2. Re-execute the render function to generate newVnode;

3. Execution patch(vnode,newVnode), diffthe algorithm obtains the final node that needs to be updated;

3. diff algorithm

1. What is diff algorithm

The diff algorithm is to compare the virtual nodes and return a patch object to store the difference between the two nodes, and finally use the message recorded by the patch to locally update the Dom.

In other words, understandable

The process of diff is to call the function named patch, compare the old and new nodes, and patch the real DOM while comparing

2. Steps

• When the state changes, reconstruct a DOM tree represented by the JS object structure;

• Compare the new DOM tree with the old DOM tree and record the differences; (diff)

• Apply the recorded diff to the real DOM; (patch)

3. Specific methods

basic strategy

• Same level comparison

• Compare side to center

for example

Old and new vnodeare as follows:

The first cycle: compare the pointed by and the pointed by and the pointed by and the F pointed by the in respectively (the following comparison methods are the same, skip it), and find that oldVnodethey startIndexhave Athe endIndexsame Dnode , and directly newVnodereuse it as The real node, one bit forward in , and one bit backward in .startIndexDnewVnodeendIndexDDoldVnodeendIndexnewVnodestartIndex

The second cycle: A, compare Cwith C, Fget Cthe same, reuse the node C, and move the pointer.

The third cycle: compare with , and find that there Ais no reusable node, create a new node , and move backward one bit.BEFEnewVnodestartIndex

The fourth cycle: A, compare Bwith B, Fget the same as B, multiplex the node B, and move the pointer.

The fifth cycle: compare Awith and A, Fget the same as A, multiplex the node A, and find that oldVnodethe head pointer is greater than the tail pointer after the pointer moves, then create all nodes ( ) newVnodebetween the head and tail pointers , and jump out of the cycle.F

Four. Summary

• When the data changes, the subscriber watcher will call patch to patch the real DOM

• Judging by isSameVnode, if the same, call the patchVnode method

• patchVnode does the following:

  • Find the corresponding real dom, called el

  • If both have text nodes and are not equal, set the el text node to Vnodethe text node

  • If oldVnodethere is a child node but VNodenot, delete the el child node

  • If there is oldVnodeno child node VNode, then VNodethe child node will be realized and added to el

  • If both have child nodes, execute the updateChildren function to compare the child nodes