v-for循環中的key值設置(One Line周分享)

咱們在v-for循環開發中須要給每一項去設置key,咱們設置key的時候都習慣於用index去設置，好比

<ul>
    <li v-for='(item,index) in list' :key='index'>
        {{item.name}}
        <button @click='deleteItem(index)></button> </li> </ul> data(){ return{ list:[ {name:'小明'}, {name:'小王'}, {name:'小李'} ] } }, methods:{ deleteItem(){ this.list.splice(index,1) } } 複製代碼

咱們項目中須要個刪除功能，按照上面的配置咱們可以準確的刪除每一行，然而當咱們項目愈來愈豐富的時候。好比：

<ul>
    <li v-for='(item,index) in list' :key='index'>
        {{item.name}}
       <component-a @deleteItem='deleteItem(index)'></component-a>
    </li>
</ul>
data(){
    return{
        list:[
            {name:'小明'},
            {name:'小王'},
            {name:'小李'}
        ]
    }
},
method:{
    deleteItem(index){
        this.list.splice(index,1)
    }
}
Vue.component('component-a',{
    data(){
        provinces:[
            {
                area："廣東"
            },
            {
                area："湖南"
            },
            {
                area："江西"
            }
        ]
    },
    methods:{
        deleteItem(){
            this.$emit('deleteItem',index)
        },
    }
    template:'<select> <option v-for='(item,index) in province' :key='index'> </option> </select> <button @click='deleteItem(index)'></button> '
})
複製代碼

當咱們點擊刪除第一項的時候，下拉框的內容沒有相對應的刪除，反而刪除的是最後一項。

咱們查看下文檔對key的 描述

按照我的理解，由於key值是是使用了index索引去設置，當數據從新渲染的時候，由於子組件的數據是沒有被追蹤到，爲了高效操做dom，不引發頁面的reflow迴流，因此vue會複用當前的元素(咱們列表中有0，1，2三項數據即索引index，咱們刪除第0項的時候，列表中通過從新渲染成0,1,由於key值不是惟一性，按照‘舊地複用’策略,咱們的第三項數據便是最後一項的數據刪除掉)。 所以，咱們在設置key的時候，要給key值設置成惟一性

<ul>
    <li v-for='(item,index) in list' :key='item.id'>
        {{item.name}}
       <component-a @deleteItem='deleteItem(index)'></component-a>
    </li>
</ul>
data(){
    return{
        list:[
            {name:'小明',id:0},
            {name:'小王',id:1},
            {name:'小李',id:2}
        ]
    }
},
method:{
    deleteItem(index){
        this.list.splice(index,1)
    }
}              ' }) 複製代碼

在數據列表添加id屬性，給key值賦上惟一值。這樣咱們就能夠進行正常的刪除。