vue 和 react key 到底有什么用？为什么不能用ind

1.Vue 中的 key 到底有什么用？

1.两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
2.同一层级的一组节点，他们可以通过唯一的id进行区分。

key的作用主要是为了高效的更新虚拟DOM

key 是给每一个 vnode(javaScript对象) 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表页渲染来说 diff 节点也更快。
diff 算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的 key 与旧节点进行比对,从而找到相应旧节点。

更准确 : 因为带 key 就不是就地复用了,在 一些节点函数中 以 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确,
更快速 : key 的唯一性可以被 Map 数据结构充分利用,相比于遍历查找的时间复杂度 O(n),Map 的时间复杂度仅仅为 O(1),
源码如下:

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

2.vue中使用v-for时为什么不能用index作为key？

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

1）index作为key，其实就等于不加key
2）index作为key，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出（这是vue官网的说明）

说明：当以数组的下标index作为key值时 其中一个元素发生了变化 就有可能导致所有元素的key值发生改变 diff算法是比较同级之间的不同 以key来进行关联 当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的Index都会发生改变，那么key自然也跟着全部发生改变， 所以index作为key值是不稳定的，这种不稳定性有可能导致性能的浪费 导致diff无法关联起上一次一样的数据 因此 能不用Index作为key就不要用Index