vue中设置key值的详细解释

相信大家在刚开始学习vue的时候用v-for遍历数组的时候旁边要设置一个key值.这个key值尽量不能设置为遍历中的index.那我这期就来详细讲解其中的原因.

主要原因是因为Vue底层中的diff算法.不认识没关系,不是很影响理解.

为了使浏览器更加快捷,咱们就加了一个key值.相同key值进行比较.

如果key设置为index会发生什么后果?

这个是原来的数组[111,222,333]  虚拟dom就是 0 111,1 222, 2 333 ;当我们删除111现在的数组变为[222,333]虚拟dom就是 0 222,1 333;相同的key值进行比较0 111 和 0 222比较值不同进行修改,1 222 和 1 333进行比较值不同进行修改,key的值是2的找不到删除.这样下来修改了2个值修改一个值删除并没有做到便捷,并且在界面上本来你点的是删除111结果页面渲染的删除333,当然修改了key=0 的值为222 key=1的值为333结果还是正确的.

当你设置一个正确的key值(这里为了简便就把每个遍历的数组值是key值)

[111,222,333] 虚拟dom 111 111, 222 222,333 333,删除111数组为[222,333] 虚拟dom是222 222,333 333,这样下来key为111没有进行删除.key为222进行对比值相同不做修改,key为333值相同不做修改.这样下来就只是删除了一个key为111的数据,便捷了很多,而且页面渲染也相同.

所以不要设置key值为index了.选一个合理的key值很重要.