在Vue 中 v-for遍历的时候 为什么要用 :key

要了解为什么要使用 :key，就得先了解一下Vue的 虚拟dom技术和diff 算法；
Vue 实现了一套虚拟dom(虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树)，使得我们不用再直接操作dom，只用操作一下数据，便可以让他自动加载和渲染，其原理正是用了一个diff 算法来解决的；
Vue的虚拟dom的diff算法，其核心是基于两个假设：
1，两个相同的组件产生类似的dom结构，不同组件产生不同的dom结构；
2，同一层级的一组dom节点，他们可以通过唯一的id进行区分；

所以我们需要用key来给每个节点做一个唯一的标识，在正确的位置插入新的节点

diff算法

步骤(上图)：
1，用js模拟虚拟的dom树；
2，对操作前后的dom树同一层的节点进行对比，一层一层对比；
3，把差异应用到真正的DOM树上；

结论：
key的主要作用：
1，key的主要作用就是用来提高渲染性能的！,
2，key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）