Vue 中 diff 算法中的key有什麼作用？

一、有相同父元素的子元素必須有獨特的key，重複的 key 會造成渲染錯誤

例如：

let inputData = [1,2,3]

<div>
    <input type="checkout" v-for="inputData">{{item}}</input>
</div>

　　

解釋：在沒有key的情況下，默認所有的input 具有相同的key值，勾選前兩個input後，inputData修改爲 [0，1，2，3],  則會發現勾選的是 0 和 1，與之前的，1 和 2 不同，當出現這樣的問題的時候，我們就會發現，key需要有唯一性

 

二、用於強制替換元素 / 組件 而不是重複使用它

<transtion>
    <span :key="text">{{text}}</span>
</transtion>

　　

解釋：1. 在沒有key的情況下，transtion 下的span 在最大程度的重用，相當與key相同，如果 key 相同，span標籤不會刪除 ，只會更新text，則不會觸發過渡

　　　2. 當有key的情況下，text發生改變時，<span>總是會被替換而不是修改，因此觸發過渡