这个和 Vue 内部的虚拟 DOM 的 Diff 算法有关。

Diff 算法的过程中，会根据 key 来判断新老元素是不是同一个元素。

• 如果使用了 index 作为 key：元素的列表发生顺序变化、添加、删除时，Diff 算法可能无法判断 VNode 是否发生了变化， 可能不会导致页面重新渲染。

• 如果使用了 随机数 作为 key：那么 Diff 算法可能认为所有的元素都发生了变化，这样就会导致所有的元素都需要重新渲染，这样就会影响性能。

所以，建议使用数据的唯一标识作为 key，这样可以保证 Diff 算法的效率。

我们可以参考一下 Vue 内部的 Diff 算法的实现，来理解：

/**
 * 判断两个VNode是否是相同节点
 * 比较key、asyncFactory、tag、isComment等属性
 * 如果是输入框，还需要比较类型、属性、状态等
 */
function sameVnode(a, b) {
  return (
    a.key === b.key && // key 节点的key，用于diff算法优化
    a.asyncFactory === b.asyncFactory && // asyncFactory 异步组件工厂函数
    ((a.tag === b.tag && // tag 节点标签名
      a.isComment === b.isComment && // isComment 是否是注释节点
      isDef(a.data) === isDef(b.data) && // data 节点数据，包含属性、事件等
      sameInputType(a, b)) || // 比较二者是否为相同的input。类型、属性、状态是否相同
      // 如果是异步组件的占位符，则检查错误状态
      (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error)))
  );
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24