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>总是会被替换而不是修改，因此触发过渡