Vue學習-vue中v-for為何要加key？index為何不推薦作為key

參考：

https://blog.csdn.net/weixin_42878211/article/details/107853208 

<template>
    <div class="slot-index">
        <div>
            <div> 無key:<input v-model="name1" type="text" />
                <button @click="add(name1)"> 添加 </button>
            </div>
            <ul>
                <li v-for="(item, i) in list">
                    <input type="checkbox" />{{ item.name }} </li>
            </ul>
        </div>
        <div>
            <div> index為key:<input v-model="name2" type="text" />
                <button @click="add(name2)"> 添加 </button>
            </div>
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <input type="checkbox" />{{ item.name }} </li>
            </ul>
        </div>
        <div>
            <div> item.id 為key: <input v-model="name3" type="text" />
                <button @click="add(name3)"> 添加 </button>
            </div>
            <ul>
                <li v-for="item in list" :key="item.id">
                    <input type="checkbox" />{{ item.name }} </li>
            </ul>
        </div>
    </div>
</template>

<script> export default { name: 'Demo1Slot', components: {}, props: {}, data: function() { return { name1: '', name2: '', name3: '', id: 4, list: [{ id: 1, name: '張三' }, { id: 2, name: '李四' }, { id: 3, name: '王二' }] } }, methods: { add(name) { this.list.unshift({ id: this.id, name }) this.id = this.id + 1
            // this.namne = ''
 } } } </script>
<style lang="scss" scope> .slot-index { &-item { margin-bottom: 10px;
    } } </style>

 

 

 

 總結： 

可以簡單得理解：加了具有唯一性得key之后，id的checkbox跟內容進行了一個關聯，是我們所要展示的效果

1、vue 中template模板會編譯為渲染函數render，然后對比虛擬DOM，再更新到真實DOM上。
2、有key：通過移動節點復用節點來更新DOM
3、無key：會通過刪除新建節點來更新DOM
4、使用下標index作為Key：數組的操作刪除新增排序，會造成BUG

 

diff

diff算法的處理方法

對操作前后的dom樹同一層的節點進行對比，一層一層對比，如下圖：

 

 

當某一層有很多相同的節點時，也就是列表節點時，Diff算法的更新過程默認情況下也是遵循以上原則。
比如下面這種情況：

 

 

我們希望可以在B和C之間加一個F，Diff算法默認執行起來是這樣的：

 

 

即把C更新成F，D更新成C，E更新成D，最后再插入E，相當沒有效率！（刪除重建）
所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

 

 

 

vue中列表循環需加:key=“唯一標識” 唯一標識可以是item里面id 等，因為vue組件高度復用增加Key可以標識組件的唯一性，為了更好地區別各個組件 key的作用主要是為了高效的更新虛擬DOM。但是我們不推薦使用index作為key！

總結：key的作用主要就是為了高效的更新虛擬DOM，使用key值，它會基於key的變化重新排列元素順序，並且會移除key不存在的元素。它也可以用於強制替換元素/組件而不是重復的使用它。

不推薦index作為key值

當以數組為下標的index作為key值時，其中一個元素(例如增刪改查)發生了變化就有可能導致所有的元素的key值發生改變
diff算法時比較同級之間的不同，以key來進行關聯，當對數組進行下標的變換時，比如刪除第一條數據，那么以后所有的index都會發生改變，那么key自然也跟着全部發生改變，所以index作為key值是不穩定的，而這種不穩定性有可能導致性能的浪費，導致diff無法關聯起上一次一樣的數據。因此，能不使用index作為key就不使用index。

也不推薦index+字符串作為key的值