Vue2.0 v-for 中 :key 到底有什么用？

如果要解释Diff算法的话

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

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

1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。

2. 同一层级的一组节点，他们可以通过唯一的id进行区分。

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。这里我们借用React’s

diff algorithm[https://calendar.perfplanet.com/2013/diff/]一张图来简单说明一下：

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

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况：

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

如果不涉及Diff算法来解释的话，我认为和就地复用有关

就地复用官方的解释 :

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素

然后，点击中间的 delete 按钮，你会看到结果变成了：

原因：

在删除2的过程中 Vue做的事情是
1.把2变成了3
2.删除3
过程：计算机是怎么进行删除的，首先第一步，遍历！ 遍历的时候对比，删除选中的项。
对比经过：第一项没有变化 ，发现了【1没变】，对比第二项时候发现，【2变成了3】，最后对比最后一项 underfined和3 发现【没有3，3被删除了】

结果：

1.既然【1没变】，就地复用之前的1和第一个
2.既然【2变成了3】，左边的2要改成3，但是里面的内容就地复用，所以 第二个 被保留下来了。因为只是2变成了3，里面的东西没理由要去修改
3.既然3被删除了，那里面的子元素都应该被删掉

如果加上了key呢？

加了key之后：

计算机的过程：
原本的数组是[｛id:1,value1｝，｛id:2,value:2｝，｛id:3,value:3｝]
删除第2项：删除了id为2的
删除之后的是[｛id:1,value1｝，｛id:3,value:3｝]
PS：
1.不要用index作为key 会有BUG

我的BUG是提示重复

2.没有id怎么办？
1、创建一个id（）函数，调用的时候自增
2 使用guid库或者uuid（）库
3 调用相关的数据库，用里面的id

Vue创建过了id,也会面临id给谁的问题

总结vue中在使用相同标签名元素的过渡切换时，会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

参考：https://www.zhihu.com/question/61064119/answer/766607894