【壹题】【个人理解】写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

没有去看过React 所以只讨论在vue的情况下。

首先个人的观点，增加key并不是为了提升遍历的效率，这只和具体的操作相关。增加key的目的是给元素添加唯一标识，让vue通过映射能够准确标识每个元素，例如对一个数组进行修改时，在不加key的情况下会对整个dom节点进行修改，加key的会通过vnode进行比较，对有差异的局部进行修改。

var vm = new Vue({
  el: '#app',
  data: {
    dataList: [1, 2, 3, 4, 5]
  }
})

 vm.dataList = [4, 1, 3, 5, 2] // 数据位置替换

 // 没有key的情况， 节点位置不变，但是节点innerText内容更新了
  [
    '<div>4</div>', // id： A
    '<div>1</div>', // id:  B
    '<div>3</div>', // id:  C
    '<div>5</div>', // id:  D
    '<div>2</div>'  // id:  E
  ]

  // 有key的情况，dom节点位置进行了交换，但是内容没有更新
  // <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
  ]

通过这个示例可以看到，有key的情况下，是对相应节点进行了位移，你依旧知道谁是谁。而不使用key的情况下，所有节点全部渲染，并不能找出和之前数组所对应的关系，从而可能会出现与子组件出现对不上号、错位等情况。所以要对元素进行唯一标识。

并且在刘博文所著的《深入浅出Vue.js》17节最佳实践中也提到：在v-if与v-else中，也需要对dom进行唯一标识。原因是vue会尽可能高效的更新dom。例如两个div元素的内容不同，vue并不会删除第一个再添加第二个，而是修改第一个与第二个元素与之不相同的内容，为了避免出现副作用，所以也要加上key属性。

壹题github与更多解答地址