Vue official document

When Vue is updating a list of elements rendered using V-for, it defaults to the “update in place” ** policy. If the order of data items is changed, Vue does not move DOM elements to match the order of data items, but instead updates each element in place and ensures that they are rendered correctly at each index location.

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).

To give Vue a hint that it can track the identity of each node to reuse and reorder existing elements, you need to provide a unique key attribute for each item:

<div v-for="item in items" :key="item.id">
  <! -- content -->
</div>
Copy the code

prompt

Do not use non-primitive values such as objects or arrays as v-for keys. Use a string or numeric value.

React

Key helps React identify which elements have changed, such as being added or removed. So you should give each element in the array a definite identity.

An element’s key should ideally be a unique string that the element has in the list. In general, we use the id of the data as the key of the element. If the element has no specified ID, you can use the index of the element as the key

By default, React iterates through lists of both child elements while recursively iterating through the child elements of a DOM node. When a difference occurs, a mutation is generated.

When adding an element at the end of the child element list, the change overhead is lower. Such as:

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
Copy the code

React matches two

  • first

    • trees, then matches the second< li>second tree, and finally inserts the

  • third

    • tree of the third element.

    If implemented simply, inserting at the head of the list can be a performance drag and can be expensive. Such as:

    <ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>
Copy the code

    React now knows that only elements with the ‘2014’ key are new; elements with the ‘2015’ and ‘2016’ keys are simply moved.

    conclusion

    What is the function of key?

    Key is the unique ID given to each VNodeRelying on the keyAnd, moreaccurateAnd, morefastGet the corresponding VNode in oldVnode.

    1. The 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.

    2. The faster

    The uniqueness of key is used to generate map objects to obtain corresponding nodes, which is faster than traversal

    Cn.vuejs.org/v2/guide/li…).

    What’s the difference between using a key and not using a key?

    No key:
    • Local multiplexing nodes. In the process of comparing whether the old and new nodes are the same node, it will be judged that the old and new nodes are the same node, because both a.key and b.key are undefined. So nodes are not recreated or deleted, only compared and updated at the attribute level of nodes. So there may be some improvement in rendering performance (in terms of creating and removing nodes);
    • Unable to maintain the state of the component. Due to the relationship of local reuse nodes, it may lead to unpredictable errors in maintaining the state of components, such as unable to maintain the animation effect, switch and other states of reshuffles.
    • There may also be performance degradation. Because it is directly in place to reuse nodes, if the modified component needs to reuse many nodes, and the order is completely different from the original, then the number of nodes created and deleted will increase a lot than when with key, and the performance will be reduced.
    Use the key:
    • Maintain component state to ensure component reuse. Because there are only identifies the key components, whether does not compare the old and new two at a time when the node is the same node directly determine to the same node, but will continue to find the key in the next node to compare the same node, can find the same key words will reuse nodes, can’t find, you can add or remove nodes.
    • Look for performance improvements. When you have a key, it’s going to generate a hash, so when you look up it’s going to be a hash lookup, which is basically O(1) complexity.
    • Node overcommitment improves performance. Because a key uniquely identifies components, as many components as possible are reused (albeit in a different order), fewer nodes are created and removed, resulting in lower consumption and improved performance.
    Performance improvement cannot only be considered in one aspect. It is not that the performance is fast when diff is fast, nor that the performance is fast when adding or deleting nodes are less. It is only a general discussion to evaluate the performance without considering the magnitude.

    reference

    Wood yi Yang front-end blog

    React

    Vue official document