\ SRC \core\vdom\patch.js updateChildren()

The special attribute of the key is mainly used in the virtual DOM algorithm of Vue to identify VNodes when comparing old and new nodes. If keys are not used, Vue uses an algorithm that minimizes dynamic elements and tries to modify/reuse the same type of elements in place whenever possible. With a key, it rearranges the elements based on the change in the key and removes elements where the key does not exist.

1. When using key:





Each loop compares the old and new trees, putting the same elements in place

// The letters represent: Eat watermelon W eat lemon L eat orange O eat mango M eat roast chicken C // first cycle patch A W L O M W L C O M // second cycle patch B L O M L C O M // third cycle patch M O M C O M // Patch O O C O for the 4th time //oldCh is finished, and the remaining C in newCh is created and inserted before O. // 4 times of patch and 1 time of appending new DOM are performedCopy the code

How does the above algorithm update the DOM? W and L before C are the same as before in patch, and dom does not need to be manipulated. Then, starting with C, C, O, and M change positions or insert new DOM. The dom of C and O is also left untouched because there are no changes, only an append C updates the DOM. So you only really manipulate the DOM once.

2. When not using key:



If the key is not set, the value of key is undefined, see the source function: \ SRC \core\vdom\patch.js


function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}
Copy the code


A.key === b.key = true Now you think that these are the same two nodes.

There are four cases of the same node: head, tail, head and tail

Patches are installed on the two same nodes.





If there is no key, patchVnode is considered to be the same node forever and will be used continuously.



In this case, the process of patch is the same as having key. But dom operations are different. The previous traversal process W and L was the same as DOM, with no operation. However, from C, dom operations were carried out for the next three times, including two DOM updates and one dom creation and insertion.

3. Conclusions:

1. Key is mainly used to update virtual DOM efficiently. The principle is that vUE can accurately judge whether two nodes are the same by key during patch, so as to avoid frequent updates of different elements and make the whole patch process more efficient, reduce dom operation and improve performance. 2. In addition, if the key is not set, it may cause some hidden bugs when the list is updated. 3. Vue also uses the key attribute when switching between elements with the same label name. The purpose is also to allow VUE to distinguish between them, otherwise VUE will only replace its internal attributes without triggering the transition effect. 支那

4, index can not be used as key

It is easy to understand why index should not be used as the key. 1, performance impact: when using index as the key, deleting all nodes after the node will cause re-rendering, because index changes, can also change some people say that you can use index as the key when the list data is not changed. That is, lists do not trigger updated elements, only static display. What do you think of that statement? The reason for this is that a group of people in the official VUE group should discuss this issue for a long time. In reply, do not use index as key under any circumstances. And was bombarded, alas! (Unless the front end writes a dead list and no operation causes the key to change, how can the front end keep the data unchanged as long as it is back-end data?) I have three thoughts on this issue:

2. Like typescript, why do we add types to variables? In addition to the specification, it is also easy to locate errors