记得点击蓝字关注我们哦！经典面试题1.写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中(建议先了解一下diff算法过程)。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：

// vue项目  src/core/vdom/patch.js  -488行// 以下是为了阅读性进行格式化后的代码// oldCh 是一个旧虚拟节点数组if (isUndef(oldKeyToIdx)) {oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)}if(isDef(newStartVnode.key)) {// map 方式获取idxInOld = oldKeyToIdx[newStartVnode.key]} else {// 遍历方式获取idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)}

创建map函数

function createKeyToOldIdx (children, beginIdx, endIdx) {let i, keyconst map = {}for (i = beginIdx; i <= endIdx; ++i) {key = children[i].keyif (isDef(key)) map[key] = i}

return map}

遍历寻找

// sameVnode 是对比新旧节点是否相同的函数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}}

没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。以下为简单的例子:

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

以上的例子，v-for的内容会生成以下的dom节点数组，我们给每一个节点标记一个身份id：

 ['

', // id：A'

', // id:  B'

', // id:  C'

', // id:  D'

' // id:  E]

1. 改变dataList数据，进行数据位置替换，对比改变后的数据

 vm.dataList = [4, 1, 3, 5, 2] // 数据位置替换// 没有key的情况， 节点位置不变，但是节点innerText内容更新了['

', // id：A'

', // id:  B'

', // id:  C'

', // id:  D'

' // id:  E]// 有key的情况，dom节点位置进行了交换，但是内容没有更新//

['

', // id：D'

', // id:  A'

', // id:  C'

', // id:  E'

' // id:  B]

增删dataList列表项

vm.dataList = [3, 4, 5, 6, 7] // 数据进行增删// 1. 没有key的情况， 节点位置不变，内容也更新了['

', // id：A'

', // id:  B'

', // id:  C'

', // id:  D'

' // id:  E]// 2. 有key的情况， 节点删除了 A, B 节点，新增了 F, G 节点//

['

', // id：C'

', // id:  D'

', // id:  E'

', // id:  F'

' // id:  G]

从以上来看，不带有key，并且使用简单的模板，基于这个前提下，可以更有效的复用节点，diff速度来看也是不带key更加快速的，因为带key在增删节点上有耗时。这就是vue文档所说的默认模式。但是这个并不是key作用，而是没有key的情况下可以对节点就地复用，提高性能。

这种模式会带来一些隐藏的副作用，比如可能不会产生过渡效果，或者在某些节点有绑定数据(表单)状态，会出现状态错位。VUE文档也说明了 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。