vue中v-for为什么要添加key

没有添加key

<template>
  <div>
    <div>
        <div>人到中年不得已,保温杯里泡枸杞</div>
        <input type="text" v-model="name">
        <button @click="addItem">添加</button>
    </div>
    <ul>
        <li v-for="(item,index) in productList">
            <input type="checkbox"> {{item.name}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name: 'csdn',
    data () {
        return {
            name:'',
            productList:[
                {id:1,name:'人参玛咖枸杞茶'},
                {id:2,name:'金莲花'},
                {id:3,name:'玫瑰茶'},
                {id:4,name:'菊花茶'},
                {id:5,name:'普洱茶'}
            ]
        }
    },
    methods: {
        addItem() {
            if(!this.name) return;
            this.productList.unshift({id:this.productList.length+1,name:this.name});
            this.name = '';
        }
    }
}
</script>

 如果选中菊花茶，当添加苦瓜茶后，就变成选中玫瑰茶了，这种是错误的，应该还是选中菊花茶。

 有key的情况

<li v-for="(item,index) in productList" :key="item.id">
    <input type="checkbox"> {{item.name}}
</li>
<!-- 其他一样就不做显示了 -->

key的作用就是更新组件时判断两个节点是否相同。

如果相同就复用，不相同就删除旧的节点创建新的节点。

在渲染简单的无状态组件时，如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表项中的文本值，要知道节点操作是十分耗费性能的。

而添加了key之后，当对比内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。