vue中v-for,key值作用

773 阅读1分钟

一.key的作用

vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,直接操作数据就可以重新渲染页面。

  • 高效的更新虚拟DON
  • 默认使用就地复用策略,列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素

不使用key时,当更新列表时,所有的数据都需要重新渲染一遍

使用key时,会在适当的位置插入新元素来完成更新

二.v-for时为什么不能用index作为key

  • 更新DOM的时候会出现性能问题
  • 会发生一些状态bug
  • 如果有数据删除就会导致index变化,从而导致数据混乱