何以要用key？

vue 和 react 都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff挂线疗法。

vue 和 react 的虚拟DOM的Diff挂线疗法大概相同，其核心是基于两个简单的假设：

两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。同一层级的一组节点，他们可以越过绝无仅有的id进行区分。

当页面的数据发生变化时，Diff挂线疗法只会比较同一层级的节点：

假若节点类型不同，直接干掉前面的节点，再创建并插入新的节点。

假若节点类型相同，则会重新设置该节点的属性，为此实现节点的更新。

总起来讲，key的作用主要是以便高效的更新虚拟DOM 。另外vue中在使用相同标签名元素的短期切换时。也会使用到key属性，其目的也是以便让vue可以区分它们，要不然vue只会替换其之中属性而不会触发短期效果。

这边。也建议尽快在使用 v-for 时提供 key attribute。除非遍历输入的 DOM 内容非常简单。

何以不能用index行为key？

因为在插入数据可能删除数据的时候，会导致后头的数据的key绑定的index变化，进而导致从新渲染，效率会降低。

这个key应该绑定你v-for循环数据中的绝无仅有值，这一来就会大大节减渲染次数，数据更新时就不用一一替换，为此使用插入新数据的挂线疗法。

链接: http://www.pannellisolari.net/article/detial/10654