使用v-for时:key的作用

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

我们使用一个案例来分析，上代码，我利用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节点的时候