vue中使用v-for时为什么不能用index作为key?

997 阅读1分钟

结论

  1. 更新DOM的时候会出现性能问题
  2. 会发生一些状态bug
  3. React 中的 key 也是如此

为什么要用key?

如果使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

总而言之,key的作用主要是为了高效的更新虚拟DOM

建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单。

为何不推荐index作为key值

当以数组为下标的index作为key值时,其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变 diff算法时比较同级之间的不同,以key来进行关联,当对数组进行下标的变换时,比如删除第一条数据,那么以后所有的index都会发生改变,那么key自然也跟着全部发生改变,所以index作为key值是不稳定的,而这种不稳定性有可能导致性能的浪费,导致diff无法关联起上一次一样的数据。因此,能不使用index作为key就不使用index。

原文链接 segmentfault.com/a/119000001… (diff运算图解) 原文链接:blog.csdn.net/weixin_4287…