The role of diff and key

The function of the key is mainly to update the virtual DOM efficiently. When comparing the old and new virtual DOM, you can accurately judge whether two nodes are the same through the key, so as to avoid frequent updating of different elements and make the entire comparisonThe process is more efficient, reducing the amount of DOM operations and improving performance;

diff algorithm

• Comparisons will only be performed at the same level, not across levels
• During the diff comparison, the loop compares from both sides to the middle

When the page data changes, vue will generate a new vnode and extract the old vnode, add the head and tail pointers to both sides respectively, the new vnode is newStart and newEnd point to its head and tail nodes respectively, and the old vnode is oldStartand oldEnd also point to his head and tail nodes respectively

When comparing, the oldStart<—>newStart, oldStart<—>newEnd, oldEnd<—>newStart, oldEnd<—>newEnd will be compared first; if the two are the same, the old node will be correspondingThe real DOM is moved to the position of the new node, and both parties move the matching pointer to the middle; if the above four comparisons fail, if there is no key currently, the real DOM will directly add a new node at the newStart position, newStartMove backward; if there is a pointer, go to the mapping table of the old vnode to find it. If not, the real dom will directly add a new node at the newStart position. If there is, it will compare whether the contents of the two are different. If there is no difference, then the real dom corresponding to the old node will be moved to the position of the new node;

When oldStart > oldEnd or newStart > newEnd, the comparison is completed;

After the comparison is completed, if newStart <= newEnd, then the node between newStart and newEnd is a new node.Then the real dom will add corresponding nodes between the current newStart and newEnd; if it is newStart> newEnd, it means that the nodes between the two are deleted, and the real dom deletes these nodes;