使用v-for时为什么要加key

151 阅读1分钟

加key的作用

  1.key的作用主要是为了高效的更新虚拟DOM,提高渲染性能。
  
  2.key属性可以避免数据混乱的情况出现。
  

原理

  1.vue实现了一套虚拟DOM,使我们可以不直接操作DOM元素只操作数据,就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法
  2.当页面数据发生变化时,Diff算法只会比较同一层级的节点;
  3.如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点后面的子节点;
    如果节点类型相同,则会重新设置该节点属性,从而实现节点更新
  4.使用key给每个节点做一个唯一标识,Diff算法就可以正确失败此节点,"就地更新"找到正确的位置插入新的节点。