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 vnode
existence, Vue needs to maximize the reuse of the created DOM elements, and the premise of reuse is to vnode
compare the old and new to find out the content that needs to be updated, and minimize the to replace. Update process:
-
Modify the data to trigger the setter, call Dep.notify to notify all subscribers Watcher;
-
Re-execute the render function to generate
newVnode
; -
Execution
patch(vnode,newVnode)
,diff
the 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 vnode
are 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 oldVnode
they startIndex
have A
the endIndex
same D
node , and directly newVnode
reuse it as The real node, one bit forward in , and one bit backward in .startIndex
D
newVnode
endIndex
D
D
oldVnode
endIndex
newVnode
startIndex
The second cycle: A
, compare C
with C
, F
get C
the same, reuse the node C
, and move the pointer.
The third cycle: compare with , and find that there A
is no reusable node, create a new node , and move backward one bit.B
E
F
E
newVnode
startIndex
The fourth cycle: A
, compare B
with B
, F
get the same as B, multiplex the node B
, and move the pointer.
The fifth cycle: compare A
with and A
, F
get the same as A, multiplex the node A
, and find that oldVnode
the head pointer is greater than the tail pointer after the pointer moves, then create all nodes ( ) newVnode
between 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
Vnode
the text node -
If
oldVnode
there is a child node butVNode
not, delete the el child node -
If there is
oldVnode
no child nodeVNode
, thenVNode
the child node will be realized and added to el -
If both have child nodes, execute the updateChildren function to compare the child nodes
-