v-for中的key值作用是什么

key属性是dom元素的唯一标识

作用：提高虚拟dom的更新

假设现在有一个数组

const list = [1,3,4]

现在如果需要在1和3中间插入一个2，如果没有加key值，这个更新过程是这样的：

list_before = [1,3,4]    // 原来的数据
list_after = [1,2,3,4] // 更新后的数据

用更新后的数据和上面的每一项做对比，

1、首先获取list_after[0]和list_before[0]做对比，发现是一样的，跳过

2、然后用list_after[1]和list_before[1]做对比，发现不一样，把dom的第二个节点更新成list_after[1]

3、接着继续用list_after[2]和list_before[2]做对比，也不一样，也更新dom

4、继续用list_after[3]和list_before[3]做对比，发现list_before[3]是没数据的，list_after[3]会被当做成新的数据，插入dom

整个过程只有第一步被跳过了，dom的更新更新了3次

在来看看有加key值，vue在更新的时候，是怎么做的？

list_before = [1,3,4]    // 原来的数据
list_after = [1,2,3,4] // 更新后的数据

有加key的情况下，原来的属性是有一个唯一的值来记录当前的元素的，你可以把上的数组看成是这样：

list_before = [1 id = 1, 3 id = 3, 4 = id = 4] // 原来的数据
list_after =  [1 id = 1,2,3 id = 3, 4 id = 4] // 更新后的数据

这样通过一个遍历，很容易就可以发现，只有2是没有id的，只要创建一次dom，在插入到1和3的位置中即可