VUE v-for的key值问题
当在VUE中使用v-for循环创建节点时，需要添加唯一标识key，一般以id作为key的标识，提高diff算法的效率
当以数组索引index作为标识key时，进行数组的逆序添加或删除（即向数组的前方添加或删除数据）时，会出现一些问题，且效率低
vue中渲染时，会先根据代码生成虚拟DOM，再创建成真实节点放入页面。当数据发生变化时，根据新数据生成新的虚拟DOM，利用diff算法对新旧虚拟DOM进行比对，此时使用到key值。若是使用index作为key值，向前添加或删除数据，改变了整个数据集合的索引，之前旧的虚拟DOM无法复用，整个节点都要重新渲染，且当涉及到input等输入内容的表单时，索引值改变，但input节点解析时认为并未改变，仍然复用，原本输入的内容会错位，与之前的位置对应不上
例如：
张三-张三（假设黄色部分是页面上的input框）
李四-李四
王五-王五
此时向data中的数据数组前方添加赵六，以index作为v-for的key，会出现如下情况
王六-张三
张三-李四
李四-王五
王五-此处为新的空白input
但以index为key向后添加时不会发生这个问题
版权声明：本文为qq_54118302原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。