vue中 使用数组下标作为v-for的key值 所带来的的问题

在用v-for更新已渲染的元素列表的时候,会使用就地复用的策略;也就是说列表数据修改的时候,他会根据key值去判断某个值是否改变了,如果改变了就重新渲染,不然就复用之前的元素。
v-for可以使用数据本身所具有的唯一值作为key,也可以使用索引index作为key

使用index作为key时:

<template>
	<div>
		<ul>
			<li v-for="(item,index) in list" :key="index">{
  {item.name}}</li>
		</ul>
	</div>
</template>
<script> export default{  data(){  return{  list:[ { id:1,name:'aa'}, { id:2,name:'bb'}, { id:3,name:'cc'}, ] } } } </script>

当我们修改list,向其中插入一条数据时:

list:[
			{ id:1,name:'aa'},
			{ id:4,name:'dd'}, //新插入数据
			{ id:2,name:'bb'},
			{ id:3,name:'cc'},
		]

此时

插入前插入后
key:0,index:0,name: aakey:0,index:0,name: aa
key:1,index:1,name: bbkey:1,index:1,name: dd
key:2,index:2,name: cckey:2,index:2,name: bb
key:3,index:3,name: cc

可见,除了name为aa的那条数据的key值没变外,另外两个都变了,也就是说aa可以复用,而另外两条数据虽然值没变,但key值改变了,需要重新渲染,这种效率是很低的。这时我们可以使用list的id作为key来提高效率。

使用id时

插入前插入后
key:0,id:0,name: aakey:0,id:0,name: aa
key:1,id:1,name: bbkey:3,id:3,name: dd
key:2,id:2,name: cckey:1,id:1,name: bb
key:2,id:2,name: cc

可见,除了新插入的数据的key值改变了,其它几条数据的key值都未改变,也就是说在重新渲染时,只需要渲染新插入的那条数据就可以了。

使用数组下标作为key值可能带来的问题

场景:使用v-for把一个数组渲染到页面上,使用数组下标作为key值
需求:点击一个复选框选中它,然后删除它
结果:被选中的元素虽然删除了,但他后面的元素的复选框被自动选中了

<div id="demo">
            <div v-for="(item,index) in list" :key="index">
                <label :for="item.msg">
                    {
  {item.msg}}
                    <input type="checkbox" :id="item.msg">
                </label>
                <button @click="shanchu(index)">delete</button>
            </div>
        </div>
<script> var demo = new Vue({  el: '#demo', data() {  return {  list: [ {  msg: 'k1', id: 1 }, {  msg: 'k2', id: 2 }, {  msg: 'k3', id: 3 }, {  msg: 'k4', id: 4 } ] } }, methods: {  shanchu(index) {  this.list.splice(index, 1) } } }) </script>

当我选中k3时
《vue中 使用数组下标作为v-for的key值 所带来的的问题》
点击删除
《vue中 使用数组下标作为v-for的key值 所带来的的问题》
k3虽然删除了,但k4的复选框变成了选中状态

    原文作者:deeop
    原文地址: https://blog.csdn.net/qq_41620202/article/details/107595645
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞