就我的使用来说(Vue)key的作用是为了在数据变化时强制更新组件，以避免“原地复用”带来的副作用。另外，某些情况下不带key可能性能更好，见：issuecomment
官方文档对于key的描述： 列表渲染-key | API-key

@yeild
路过，越俎代庖一下，不一定对...
“建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。”
你是说这个么..它的本意是你应该单独指定一个Key而不是使用index来作为key...就像你说的这里还有一个复用问题..
但，如果说不带key性能会更好，为啥还要建议带key呢？
这个性能提升的前提有一句“刻意依赖默认行为”..也就是说不是说你不带key就会有性能提升...
而实际上，只是单纯的说查找这一过程...你去试试 在arr中使用indexOf 和使用obj[key] 的性能区别..就能感受到性能差异了..

主要是为了提升diff【同级比较】的效率。自己想一下自己要实现前后列表的diff，如果对列表的每一项增加一个key，即唯一索引，那就可以很清楚的知道两个列表谁少了谁没变。而如果不加key的话，就只能一个个对比了。

就react而言，key是对于列表组件而言，并且无key或者key不唯一会报错提示

@Tarhyru key能提高diff效率其实是不准确的。

见vue/patch.js，在不带key的情况下，判断sameVnode时因为a.key和b.key都是undefined，对于列表渲染来说已经可以判断为相同节点然后调用patchVnode了，实际根本不会进入到答主给的else代码，也就无从谈起“带key比不带key时diff算法更高效”了。

然后，官网推荐推荐的使用key，应该理解为“使用唯一id作为key”。因为index作为key，和不带key的效果是一样的。index作为key时，每个列表项的index在变更前后也是一样的，都是直接判断为sameVnode然后复用。

说到底，key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。

正是因为带唯一key时每次更新都不能找到可复用的节点，不但要销毁和创建vnode，在DOM里添加移除节点对性能的影响更大。所以会才说“不带key可能性能更好”。看下面这个实验，渲染10w列表项，带唯一key与不带key的时间对比：

不使用key的情况：

<li v-for="item in list">{{ item.text }}</li>

使用id作为key的情况：

<li v-for="item in list" :key="item.id">{{ n.text }}</li>

list构造：

  const list1 = []
  const list2 = []
  for (let i = 0; i <= 100000; i++) {
    list1.push({
      id: i,
      text: i
    })
    list2.push({
      id: i * 2,
      name: 100000 - i
    })
  }

因为不带key时节点能够复用，省去了销毁/创建组件的开销，同时只需要修改DOM文本内容而不是移除/添加节点，这就是文档中所说的“刻意依赖默认行为以获取性能上的提升”。

既然如此，为什么还要建议带key呢？因为这种模式只适用于渲染简单的无状态组件。对于大多数场景来说，列表组件都有自己的状态。

举个例子：一个新闻列表，可点击列表项来将其标记为"已访问"，可通过tab切换“娱乐新闻”或是“社会新闻”。

不带key属性的情况下，在“娱乐新闻”下选中第二项然后切换到“社会新闻”，"社会新闻"里的第二项也会是被选中的状态，因为这里复用了组件，保留了之前的状态。要解决这个问题，可以为列表项带上新闻id作为唯一key，那么每次渲染列表时都会完全替换所有组件，使其拥有正确状态。

这只是个简单的例子，实际应用会更复杂。带上唯一key虽然会增加开销，但是对于用户来说基本感受不到差距，而且能保证组件状态正确，这应该就是为什么推荐使用唯一id作为key的原因。至于具体怎么使用，就要根据实际情况来选择了。

以上个人见解，如有误望指正。

就我的使用来说(Vue)key的作用是为了在数据变化时强制更新组件，以避免“原地复用”带来的副作用，官方文档也说明了不带key性能更好，见：List Rendering - key

我的理解是，vue和react虽然都采用了diff算法。 但是react本身的设计和vue的设计是截然不同的， vue采用了更加细粒度的更新组件的方式，即给每一个属性绑定监听， 而react是采用自顶而下的更新策略，每次小的改动都会生成一个全新的vdom。从而进行diff，如果不写key，可能就会发生本来应该更新却没有更新的bug。
这个bug其实和diff算法有关，react团队完全可以写一个没有这个“bug”版本的代码， 但是这是一种权衡，一种性能和方便使用的权衡。 写不写key能够提高性能的根本在于一方面diff算法会优先判断key是否相同，如果相同则不进行后面的运算。 如果key相同，就更好了，根本不需要重新创建节点

总结， 更确切的说应该是diff算法在你的复杂的列表稳定的时候能够明显提高性能，因为节点可以重用。
但是对于列表频繁更新的场景， 节点不能重用，但是diff 可以省略一部分逻辑，因此性能也会更好。
但是两者的性能优化不在同一个纬度，一个是 创建和更新节点（我称之为渲染器）的优化，
一个是DOM diff 算法（我称之为核心引擎）的优化

@yeild
你这里说的是创建的开销
而这道题讨论的是diff时的速度，我的理解是在说查找某一节点进行修改时的耗时..
我并不知道vue如果不指定key时对这个查找是否会有别的优化，但从这个解答来说是没有的.
所以其实我们说的性能不是一个东西
不过，于我来说通过你的回复也理清了一些创建过程的概念，总之是有收获的

@Tarhyru 不是的，我是指如果不带key，则a.key 和 b.key 都是undefined，就直接进入两个节点相同的逻辑，到这里diff已经结束了，根本不会运算到后边'利用对象取值而不是遍历数组'找相同节点的那一步。 从这个角度来说，并没有体现“有key比无key diff算法效率更高这一点”。
也不是说楼主的回答是错误的，但仅在于在前面的逻辑中都没有找到相同的节点，才会优先通过keyMap查找，次而通过遍历查找，从这里优化到diff速度。
另外，这道题并非讨论diff速度，而是说key的作用。所以我给出的结论是：key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。

@azl397985856 你的补充很好，我提到的“不带key性能更好”，其实是因为两个key都是undefined，自然就相同然后复用组件了，原文有歧义，已做修改。

@yeild
了解你的意思，这么说的确楼主的说法有歧义，而我在思考上也先入为主了...
但是，总觉得有齿轮没有咬合在一起..
“key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。”
这是在说创建的情况吧？新增的时候如果没有key，就会复用默认的而不重新创建
那么修改呢？需要先通过key来找到需要修改的节点，而如果没有key则会遍历所有节点..这个过程应该也算是diff的过程吧？
那么严格来说：key对于修改节点时执行diff时会对性能有所提升，而对于新增这种情况时整体性能是下降的
这么描述是不是准确一些？

2019-03-01
补充一篇文章，感兴趣的去翻翻，也许认识会全一些..
vue diff算法解析

@Tarhyru
关于遍历节点，实际上不论有没有key，都会遍历节点去找是否有sameVnode，而不是能够像对象取值一样拿到哪个节点需要修改的。你可以看下这部分代码，首先是while循环判断节点是否相同，只有没找到相同节点时，才会进最后的else，也就是楼主给出的代码，在这里key属性才能优化到查找速度

@yeild
学习到了，看代码的确，key只在查找复用节点的时候起到了查找作用...
那么，的确楼主的说法不完全错....但放在这道题里是不合适的
至少对于diff过程来说这个key是起不到提速效果的

Diff算法只在有重新排序（包括中间插入和删除节点）的情况下才可能有优化的作用，因为这样会有已有节点的移动，删除，以及新节点的插入等操作，这种情况下最好是复用以前已经生成的节点。
楼上不加Key的时候速度还更快的原因是一种简单的特例，不加key的列表对比一定无法使两个表中的元素意义对应，这种情况下的更新无法保证重新排序后结果的正确性。
另外React的diff算法比Vue的diff算法更复杂一些。

@yeild
刚发现楼主回复了..
然后按它说的去查了下...发现我们两个前面的讨论也有一些误导性内容....
虽然过程可能的确是有没有key都是遍历...但是key似乎的确在diff中能起到提速作用...
具体看看这个？vue diff算法解析

简单来说就是在大部分情况下增强复用性，在 diff 两个新老 list 的时候，vue 会采用
1.两个开头指针不断向后遍历，如果一直相同，那么可以复用。
2.两个尾部指针向前移动，相同即可复用。
3.老的 list 的头指针和新的 list 的尾指针对比，相同即可复用。
4.老的 list 的尾指针和新的 list 的头指针对比，相同即可复用。
5.这里开始用到 key 了，如果上面的四种同级比较策略没有找到可以复用的 dom 元素，通过唯一的 key 再去老的 list 中找一下，看看是否能找到可以复用的 dom，(这里源码使用 hash 存储老的 list 中的 key => 老的 list 的索引的映射，在寻找的过程中是 O(1) 的时间复杂度)，这里如果利用 key 也没有找到可以复用的 dom ，那么只能重新创建了。
总结一下：通过 key 去查找是否可以复用的 dom，复用总比重新创建要节省内存开销

不加key就默认采用“就地复用”策略，加key也是为了复用。大佬，给我解释一下这都是什么跟什么。

就react而言，key是对于列表组件而言，并且无key或者key不唯一会报错提示

warning，not error

就react而言，key是对于列表组件而言，并且无key或者key不唯一会报错提示

报错是eslint的问题， 与为什么用key无关

看完了所有的答案，好像都没有一个实际案例来说明没有key的时候带来的问题以及有key的时候是如何解决的，下面给大家跑一个案例：

<template>
  <ul>
    <li v-for="item in list">{{item.name}}</li>
  </ul>
  <button @click="changeList">删除列表</button>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.list = Array.from({length: 10}).map((_,index) => {
      return {
        name: index,
        id: index
      }
    })
    this.$nextTick(()=>{
      let listNodes = document.getElementsByTagName("li")
      listNodes[0].setAttribute("active", true)
    })
  },
  methods: {
    changeList () {
        this.list.splice(0,1, {
          name: 9,
          id: 9
        })
    }
  }
}
</script>

在这里有一个列表, 在创建之后被别有用心之人第一项的属性上加了一个setAttribute("active", true)，然后点击按钮更新了第一条数据，你会发现列表第一条的属性”active“依然存在，但如果加上了key，这个属性就消失了。那么就说明key在这里的作用就是创建了一个全新的节点，替换掉了原来的节点。
还有一个例子是给任意一个节点绑定一个动态的key，然后设置一个按钮，每次点击就更新这个key值，你会发现，这个节点会不断的进行更新（这也是一个强制更新组件的一个方法）

react Diffing算法详解

render函数执行会产生react元素树，下次render会产生另外一个元素树，react需要对比两个元素树差别，来更新同步真实DOM，使用最简单的广度优先遍历，时间复杂度达到O(n^3)
react使用O(n)启发式算法，提出以下两个假设：

1. 不同的元素肯定会产生不同的树
2. 可以使用key来指定哪一些元素不用更新

元素树的更新有以下几种情况：

1. 无需更新
2. 全新的节点，新增一个DOM阶段
3. 需要修改属性的节点，更新样式或者其他属性
4. 不需要的节点，需要删除

注意情况

1. 根元素相同的元素不会删除节点，而是会原地复用
2. key可以用来指定无需更新的元素

key元素的作用是用来指定当前元素无需删除，只需要原地复用

正是因为带唯一key时每次更新都不能找到可复用的节点，不但要销毁和创建vnode

这句话不对吧，原来保留的节点是可以复用的

有key: 真定位,强复用
没key: 无定位,弱复用