如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力
我们使用一个案例来分析，上代码，我利用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>
然后当点击按钮的时候，我们改变第一个item的属性值，使它发生改变，我们看看dom渲染的结果怎么样
第一段代码，由于没有给绑定key，vue会尽可能保留原来的dom，只修改它同原来的dom不一样的属性而已，所以只是p标签内的innerText发生了改变
第二段代码，由于给v-for的子对象绑定了唯一key并且这个key值是同item.name同步的，所以当改变item.name属性的时候，vue认为老的dom被移除了，新的dom被创建了(因为只是用key来识别dom是不是原来的)，所以看到了transition发生了效果
总结
key的原理
key的原理就是将原来对比DOM细节来检测变动改为了通过key的比较来检测，更快更准确了什么时候需要用到key?
1、当key绑定的属性发生变化时，希望立马可以发生transition动画效果的情况(常用)
2、当key绑定的属性发生变化时，希望重新渲染该dom节点的时候
