Home > Article > Web Front-end > What is Key in vue? What is the difference between setting the key and not setting it?

What is Key in vue? What is the difference between setting the key and not setting it?

青灯夜游forward: 2022-05-19 21:09:454208browse

What is Key in vue? The following article will introduce to you the principle of key in vue, and talk about the difference between setting the key and not setting the key. I hope it will be helpful to everyone!

1. What is Key

Before we begin, let’s restore two actual work scenarios

When we use v-for, we need to add key

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

## to the unit #Use the timestamp generated by
new Date() as key, and manually force a re-rendering

<Comp :key="+new Date()" />

So what is the logic behind this? , What is the function of

key?

In a word

key is the unique ID given to each vnode, and it is also an optimization strategy for diff. It can find the corresponding one more accurately and faster based on the key. vnode node. (Learning video sharing: vue video tutorial)

The logic behind the scene

When we are using

v-for When , you need to add key

If key is used, Vue will record the elements according to the order of keys. If the element that once owned the key no longer appears, it will be directly removed or destroyed

Use

new Date()The generated timestamp is used as key, manually forced to trigger re-rendering

2. The difference between setting the key and not setting the key

For example Example:

Create an instance and insert data into the
items array after 2 seconds

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 创建实例
    const app = new Vue({
      el: &#39;#demo&#39;,
      data: { items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;] },
      mounted () {
        setTimeout(() => { 
          this.items.splice(2, 0, &#39;f&#39;)  // 
       }, 2000);
     },
   });
  </script>
</body>

Without using

key, vue This operation will be performed:

What is Key in vue? What is the difference between setting the key and not setting it?

Analyze the overall process:

patch , but the data is the same, the operation does not occurdom
patch, but the data is the same, does not occurdomOperation
patch, the data is different, domoperation occurs
patch, the data is different, dom operation occurs
patch, the data is different, dom operation occurs
DOM

occurs in total 3 updates and 1 insert operation

When using

key: vue will perform the following operation:

patch, but the data is the same, no dom operation occurs
patch, but the data is the same, no dom operation occurs
- patch, but the data is the same, no dom operation will occur
patch, but the data is the same, no dom operation occurs
patch, but the data is the same, No dom operation occurs

A total of 0 updates and 1 insertion operation occurred

Through the above two small examples, it can be seen that setting

key can greatly reduce the DOM operations on the page and improve the diff efficiency

Can setting the key value definitely improve diff efficiency?

In fact, this is not the case. The document also clearly states that

When Vue.js uses v-for to update the rendered element list, it defaults to "in-place reuse" Strategy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element here and ensure that it displays each element that has been rendered at a specific index

This default mode is efficient, but it is only suitable for list rendering output that does not rely on subcomponent state or temporary DOM state (for example: form input values)

It is recommended to use it whenever possible ## Provide

key when #v-for, unless traversing the output DOM content is very simple, or deliberately relying on the default behavior to obtain performance improvements<h2 data-id="heading-4"><strong>三、原理分析</strong></h2> <p>源码位置：core/vdom/patch.js </p> <p>里判断是否为同一个<code>key，首先判断的是key值是否相等如果没有设置key，那么key为undefined，这时候undefined是恒等于undefined

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

updateChildren方法中会对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    ...
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (isUndef(oldStartVnode)) {
            ...
        } else if (isUndef(oldEndVnode)) {
            ...
        } else if (sameVnode(oldStartVnode, newStartVnode)) {
            ...
        } else if (sameVnode(oldEndVnode, newEndVnode)) {
            ...
        } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
            ...
        } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
            ...
        } else {
            if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
            idxInOld = isDef(newStartVnode.key)
                ? oldKeyToIdx[newStartVnode.key]
                : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
            if (isUndef(idxInOld)) { // New element
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
            } else {
                vnodeToMove = oldCh[idxInOld]
                if (sameVnode(vnodeToMove, newStartVnode)) {
                    patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
                    oldCh[idxInOld] = undefined
                    canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
                } else {
                    // same key but different element. treat as new element
                    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
                }
            }
            newStartVnode = newCh[++newStartIdx]
        }
    }
    ...
}

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of What is Key in vue? What is the difference between setting the key and not setting it?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete

Previous article：How to communicate between Vue parent and child components? (with examples)Next article：How to communicate between Vue parent and child components? (with examples)

See more

What is Key in vue? What is the difference between setting the key and not setting it?

1. What is Key

The logic behind the scene

2. The difference between setting the key and not setting the key

Can setting the key value definitely improve diff efficiency?

Related articles