如果覺得還有點(diǎn)用整袁，請您給我一個贊矫废！您的贊是我堅(jiān)持下去的動力
我們使用一個案例來分析，上代碼疹启，我利用transition來讓大家直觀的看到dom有沒有被刪除或增加
/**這里沒有綁定key**/
<div @click="btnLabel" v-for="(item,idx) in listNoKey">
<transition name="fade2" mode="out-in">
<div @click="btnLabel">
<p>{{item.name}}</p>
</div>
</transition>
</div>
/**這里綁定了key**/
<div v-for="(item,idx) in listWithKey">
<transition name="fade2" mode="out-in">
<div @click="btnLabel" :key="item.name">
<p>{{item.name}}</p>
</div>
</transition>
</div>
然后當(dāng)點(diǎn)擊按鈕的時候林说，我們改變第一個item的屬性值粘驰，使它發(fā)生改變，我們看看dom渲染的結(jié)果怎么樣
第一段代碼述么，由于沒有給綁定key，vue會盡可能保留原來的dom愕掏，只修改它同原來的dom不一樣的屬性而已度秘，所以只是p標(biāo)簽內(nèi)的innerText發(fā)生了改變
第二段代碼，由于給v-for的子對象綁定了唯一key并且這個key值是同item.name同步的饵撑，所以當(dāng)改變item.name屬性的時候剑梳，vue認(rèn)為老的dom被移除了，新的dom被創(chuàng)建了(因?yàn)橹皇怯胟ey來識別dom是不是原來的)滑潘，所以看到了transition發(fā)生了效果
總結(jié)
key的原理
key的原理就是將原來對比DOM細(xì)節(jié)來檢測變動改為了通過key的比較來檢測垢乙，更快更準(zhǔn)確了什么時候需要用到key?
1、當(dāng)key綁定的屬性發(fā)生變化時语卤，希望立馬可以發(fā)生transition動畫效果的情況(常用)
2追逮、當(dāng)key綁定的屬性發(fā)生變化時，希望重新渲染該dom節(jié)點(diǎn)的時候
