在用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'},
		]

此时

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

使用id时

可见，除了新插入的数据的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时

点击删除

k3虽然删除了，但k4的复选框变成了选中状态