How to implement diff algorithm by vue

This article mainly introduces the relevant knowledge of "how to achieve the diff algorithm in vue". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "how to achieve the diff algorithm in vue" can help you solve the problem.

Module path: src\ core\ vdom\ patch.js

Problem: the diff algorithm is mainly the comparison and update of the child nodes of the same node, that is, the comparison algorithm of the same level nodes. Dom comparison updates, in order to minimize the destruction and reconstruction of dom, so the diff algorithm as far as possible to move, and then add and delete

Process analysis

Compare the old VNode node oldCh with the new VNode node newCh and create four indexes to compare:

Two indexes oldStartIdx (the old VNode start position) and oldEndIdx (the old VNode end position) point to the start and end subscript of oldCh, respectively.

Two indexes newStartIdx (new VNode start position) and newEndIdx (new VNode start position) point to the start and end subscript of newCh, respectively

And create the VNode node oldStartVnode,oldEndVnode,newStartVnode,newEndVnode corresponding to the four index locations, as follows:

Let oldStartIdx = 0

Let newStartIdx = 0

Let oldEndIdx = oldCh.length-1

Let oldStartVnode = oldCh [0]

Let oldEndVnode = oldCh [oldEndIdx]

Let newEndIdx = newCh.length-1

Let newStartVnode = newCh [0]

Let newEndVnode = newCh [newEndIdx]

Let oldKeyToIdx, idxInOld, vnodeToMove, refElm

Traverses the node while according to the index (oldStartIdx to newEndIdx directly inserts the node behind the old node

End judgment 2: when the end is newStartIdx > newEndIdx, it means that the new node has been traversed, but the old node has not been traversed, then there are more old nodes than the new node, and the nodes between oldStartIdx and oldEndIdx are deleted.

This is the end of the introduction on "how vue implements the diff algorithm". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.