这篇文章主要介绍了key在Vue列表渲染时究竟起到了什么作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？
在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。
Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点，所以在diff中逻辑都是为了减少新的创建而更多的去复用已有DOM节点来完成DOM的更新。
在新旧vnode的diff过程中，key是判断两个节点是否为同一节点的首要条件：
// 参见Vue2源码 core/vdom/patch.jsfunction sameVnode (a, b) { return ( a.key === b.key “>// 参见Vue2源码 core/vdom/patch.jsfunction updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { … while (oldStartIdx = oldEndIdx = 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 “>if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)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}
这个map中将所有定义了key的oldVnode在数组中的index值作为键值，它的key作为键名存储起来，然后赋给oldKeyToIdx
idxInOld = isDef(newStartVnode.key) oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)function findIdxInOld (node, oldCh, start, end) { for (let i = start; i end; i++) { const c = oldCh[i] if (isDef(c) “>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 “>`div v-for=”i in arr”{{ i }}/div`// 如果我们的数组是这样的[1, 2, 3, 4, 5]// 它的渲染结果是这样的`div1/div` // key: undefined`div2/div` // key: undefined`div3/div` // key: undefined`div4/div` // key: undefined`div5/div` // key: undefined// 将它打乱[4, 1, 3, 5, 2]// 渲染结果是这样的 期间只发生了DOM节点的文本内容的更新`div4/div` // key: undefined`div1/div` // key: undefined`div3/div` // key: undefined`div5/div` // key: undefined`div2/div` // key: undefined// 如果我们给这个数组每一项都设置了唯一的key[{id: ‘A’, value: 1}, {id: ‘B’, value: 2}, {id: ‘C’, value: 3}, {id: ‘D’, value: 4}, {id: ‘E’, value: 5}]// 它的渲染结果应该是这样的`div1/div` // key: A`div2/div` // key: B`div3/div` // key: C`div4/div` // key: D`div5/div` // key: E// 将它打乱[{id: ‘D’, value: 4}, {id: ‘A’, value: 1}, {id: ‘C’, value: 3}, {id: ‘E’, value: 5}, {id: ‘B’, value: 2}]// 渲染结果是这样的 期间只发生了DOM节点的移动`div4/div` // key: D`div1/div` // key: A`div3/div` // key: C`div5/div` // key: E`div2/div` // key: B
我们给数组设置了key之后数组的diff效率真的变高了吗？
并没有，因为在简单模板的数组渲染中，新旧节点的key都为undefined，根据sameVnode的判断条件，这些新旧节点的key、tag等属性全部相同，所以在sameVnode(oldStartVnode, newStartVnode)这一步的时候就已经判定为对应的节点（不再执行头尾交叉对比），然后直接进行patchVnode，根本没有走后面的那些else。每一次循环新旧节点都是相对应的，只需要更新其内的文本内容就可以完成DOM更新，这种原地复用的效率无疑是最高的。
而当我们设置了key之后，则会根据头尾交叉对比结果去执行下面的if else，进行判断之后还需要执行insertBefore等方法移动真实DOM的节点的位置或者进行DOM节点的添加和删除，这样的查找复用开销肯定要比不带key直接原地复用的开销要高。
Vue文档中对此也进行了说明：
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
所以，简单列表的渲染可以不使用key或者用数组的index作为key（效果等同于不带key），这种模式下性能最高，但是并不能准确的更新列表项的状态。一旦你需要保存列表项的状态，那么就需要用使用唯一的key用来准确的定位每一个列表项以及复用其自身的状态，而大部分情况下列表组件都有自己的状态。
总结
key在列表渲染中的作用是：在复杂的列表渲染中快速准确的找到与newVnode相对应的oldVnode，提升diff效率
以上所述是小编给大家介绍的key在Vue列表渲染时究竟起到了什么作用详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
