v-for中为什么要用key？有什么作用，为什么不能以index作为key？

v-for中为什么要用key？有什么作用，为什么不能以index作为key？

vue中经常用到v-for，经常与HTML标签用于数据的遍历,v-for 可以绑定数据到数组来渲染一个列表。
v-for中key作用：可以快速查找到节点，减少渲染次数，提升渲染性能

结论：

• 更新DOM的时候会出现性能问题
• 会发生一些状态bug
• React 中的 key 也是如此

为什么要用key？

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

Vue 和 React 的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
同一层级的一组节点，他们可以通过唯一的id进行区分。
基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

用一张图简单说明一下：

在这里插入图片描述

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

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

如