标签：index Vue 系列 name key 王五 数据 id
目录
我们现在在使用 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。