Vue系列之v-for中key的作用
作者：互联网
目录
我们现在在使用 v-for 的时候，都必须会加上一个 key 值，并且很多人会使用 index 来作为 key，其实这样是不太正确的一种做法。那么 v-for 中的键值 key 到底有什么作用呢。
首先看一看 Vue 文档里的说法：
在用 v-for 更新已渲染的元素列表的时候，会使用就地复用的策略；这就是说列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。
总之，v-for 通过 key 值来提升渲染效率的。
1、示例
list: [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
{
id: 3,
name: '王五'
}
]
<ul>
<li v-for="(item, index) in list" v-bind:key="index">{{ item.name }}</li>
</ul>
这个场景在我们开发的时候经常会碰到，因为不加 key，vue 现在会直接报错，所以我使用 index 作为 key.
下面再举两个例子来看数据更新后的情况：
1.1、在最后一条数据后再加一条数据
list: [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
{
id: 3,
name: '王五'
},
{
id: 4,
name: '在最后添加的一条数据'
}
]
此时前三条数据直接复用之前的，新渲染最后一条数据，此时用 index 作为 key，没有任何问题。
1.2、在中间插入一条数据
list: [
{
id: 1,
name: '张三'
},
{
id: 4,
name: '在中间添加的一条数据'
},
{
id: 2,
name: '李四'
},
{
id: 3,
name: '王五'
}
]
此时更新渲染数据，通过 index 定义的 key 去进行前后数据的对比，发现
之前的数据 之后的数据
key: 0 index: 0 name: 张三 key: 0 index: 0 name: 张三
key：1 index: 1 name: 李四 key：1 index: 1 name: 在中间添加的一条数据
key：2 index: 2 name：王五 key：2 index: 2 name：李四
key：3 index: 3 name：王五
可以发现除了第一条数据可以复用以外，另外三台哦数据都需要重新渲染，因为 key 值发生了变化；
这时候就可以体现了一个效率问题，只插入了一条数据，却要重新渲染三条数据；
所以我们需要可以想办法让数组中不会变化的数据的 key 值也不变，所以不能通过 index 来设置 key 值，应该设置一个唯一的 id 来标识数据的唯一性；我们修改之后再来对比一下渲染的效率：
之前的数据 之后的数据
key: 1 id: 1 index: 0 name: 张三 key: 0 id: 1 index: 0 name: 张三
key：2 id: 2 index: 1 name: 李四 key：4 id: 4 index: 1 name: 在中间添加的一条数据
key：3 id: 3 index: 2 name：王五 key：2 id: 2 index: 2 name：李四
key：3 id: 3 index: 3 name：王五
对比可以发现，只有一条数据发生了变化，因为其他数据的 id 都没变，所以 key 值也没变，所以只需要渲染这一条新的数据即可
所以一般推荐使用 id 作为 key 值来配合 v-for 使用。
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
标签：index,Vue,系列,name,key,王五,数据,id 来源： https://blog.csdn.net/weixin_62277266/article/details/123119237