v-for中key的作用

v-for在渲染的过程中采用就地复用的策略，列表修改数据的时候会根据key来判断某一项是否需要重新渲染，如果该项没有改变则继续复用。我们通常用数组的index来作为key但这其实是一种不推荐的方法。为什么不推荐呢？我们举个例子

let list = [{id:1,name:jack},{id:2,name:tony},{id:3,name:henry},{id:4,name:john}]

如果我们直接在数组后面push一条name是john的数据进去，这样用index作为key是没问题的。但是如果我们从中间插入数据

let list = [{id:1,name:jack},{id:2,name:jason}{id:3,name:tony},{id:4,name:henry},{id:5,name:john}]

 

key	id	index	name		key	id	index	name
1	1	0	jack		1	1	0	jack
2	2	1	json		2	2	1	tony
3	3	2	tony		3	3	2	henry
4	4	3	henry		4	4	3	john
5	5	4	john

由于jason的插入导致数组的index发生变化，key和数据的一一对应关系也被破坏，那么虚拟dom的diff算法就会以为key和数据不再对应的数据是需要重新渲染的，如此一来就会增加没必要的内存消耗。但是我们如果使用Id则不会有这个问题。