Both VUE and React use the diff algorithm to compare old and new virtual nodes to update nodes. In the DIFF function of VUE (it is recommended to understand the diFF algorithm process first).

In the cross-comparison, when there is no result from the nod and tail cross-comparison between the new node and the old node, the key in the old node array will be compared according to the key of the new node, so as to find the corresponding old node (here it is a map map with key => index). If it is not found, it is considered a new node. If there is no key, a traversal lookup is used to find the corresponding old node. One is a map, and the other is a traversal search. By comparison. Map enables faster mapping.

Vue source code is as follows:

// oldCh is an old virtual node array if (isUndef(oldKeyToIdx)) {oldKeyToIdx =  createKeyToOldIdx(oldCh, oldStartIdx, OldEndIdx)} if(isDef(newStartvNode.key)) {// idxInOld = oldKeyToIdx[newStartvNode.key]} else {// idxInOld = oldKeyToIdx[newStartVNode.key]} else {// idxInOld = oldKeyToIdx[newStartVNode.key]} else {// idxInOld = oldKeyToIdx[newStartVNode.key] idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) }Copy the code

Creating a map function

 function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}
Copy the code

Traverse to find

Function findIdxInOld (node, oldCh, start, end) {for (let I = start; i < end; i++) { const c = oldCh[i] if (isDef(c) && sameVnode(node, c)) return i } }Copy the code

So what exactly does key do?

To sort it out:

Key is the unique ID given to each Vnode. You can rely on the key to get the corresponding VNode in oldVnode more accurately and faster.

  1. A more accurate

Because there is no local reuse with key, local reuse can be avoided in sameNode function A. key === B. key comparison. So it’s more accurate.

  1. faster

The uniqueness of key is used to generate map objects to obtain corresponding nodes, which is faster than traversal. This is my original point of view. From this point of view, map is faster than traversal.)

Example:

The absence of a binding key, and the simplicity of traversing the template, results in faster comparisons between new and old virtual nodes, and node reuse. And this reuse is in place reuse, a duck type reuse. Here’s a simple example:

<div id="app"> <div v-for="i in dataList">{{ i }}</div> </div> var vm = new Vue({ el: '#app', data: { dataList: [1, 2, 3, 4, 5]}}Copy the code

In the example above, the contents of v-for generate the following ARRAY of DOM nodes, and we give each node an id:

1 [' < div > < / div > ', / / id: A '< div > 2 < / div >', / / id: B '< div > 3 < / div >', / / id: C '< div > 4 < / div >', / / id: D '<div>5</div>' // id: E ]Copy the code

DataList = [4, 1, 3, 5, 2] //

/ / without the key, the node position remains unchanged, but the innerText node updates the [' < div > 4 < / div > ', / / id: A '< div > 1 < / div >', / / id: B '< div > 3 < / div >', / / id: C '<div>5</div>', // id: D '<div>2</div>' // id: // <div v-for=" I in dataList" :key=' I '>{{I}}</div> ['<div>4</div>', // id:  D '<div>1</div>', // id: A '<div>3</div>', // id: C '<div>5</div>', // id: E '<div>2</div>' // id: B ]Copy the code

Add or delete dataList list items

Vm. dataList = [3, 4, 5, 6, 7] Without A key, the node position unchanged, content is also updated [' < div > 3 < / div > ', / / id: A '< div > 4 < / div >', / / id: B '< div > 5 < / div >', / / id: C '<div>6</div>', // id: D '<div>7</div>' // id: E ] // 2. // <div v-for=" I in dataList" :key=' I '>{{I}}</div> ['<div>3</div>', // id:  C '<div>4</div>', // id: D '<div>5</div>', // id: E '<div>6</div>', // id: F '<div>7</div>' // id: G ]Copy the code

From the above point of view, nodes can be reused more effectively without key and diff speed is also faster without key, because it takes time to add and delete nodes with key. This is what the VUE documentation calls the default mode. However, this is not the function of the key, but the node can be reused in the absence of a key to improve performance.

This mode has some hidden side effects, such as the possibility that transitions may not occur, or that there is bound data (form) state at some nodes and state mismatches occur. The VUE documentation also states that this default mode is efficient, but only for list rendering output that does not depend on child component state or temporary DOM state (for example, form input values).

Finally attached a JS interview question hey hey

ParseInt function The map function

That’s all for today, thank you!!