v-for中的key的作用和原理

key是虚拟dom对象的唯一标识。

v-for循环时，根据数据生成虚拟dom，在根据虚拟dom生成真实dom。

当数据发生变化时，会生成新的虚拟dom。

然后vue会将新的虚拟dom和初始虚拟dom进行对比，即：diff算法

如果新的虚拟dom中的key和初始虚拟dom中的key一致：

• 如果虚拟dom的内容没变，就直接复用之前的真实dom
• 如果虚拟dom的内容变了，就生成新的dom节点，替换掉之前的

如果新的虚拟dom中的key和初始虚拟dom中的key不一致：

• 就创建新的真实dom节点，随后渲染页面

用index作为key值可能会影发的问题：

• 当对数据进行逆向删除或者添加操作的时候，会产生没有必要的真实dom节点的更新，或者产生错误的dom更新，直接导致界面错误。