说明

在一个业务实现中，数据为一个列表，列表项为一个对象，要求可以新建列表项，并支持对列表项进行重新排序

问题

在vue中，使用v-for对象列表进行遍历时，需要设置key属性，如果设置为索引index时，重新排序时会出现问题，所以需要这个列表项对象的唯一id来做key值，而当数据为新创建状态时没有这个唯一的id，在服务器上保存之后就会有一个uuid。当然这里可以给列表项添加一个字段为唯一的id，这样也是可以的。

用WeakMap解决

WeakMap使用引用类型的值作为key，正好对应了列表项数据对象，然后用nanoid或uuid库创建的唯一id作为value，即可获取对象对应的唯一id，用这个id作为v-for遍历中的key是比较合适的，不会因为重新排序而导致key错误

实现代码：

import { nanoid } from "nanoid";

const uniqueIdsMap = new WeakMap();

export function getUniqueId(obj: object): string {
  if (uniqueIdsMap.has(obj)) {
    return uniqueIdsMap.get(obj);
  } else {
    const uniqueId = nanoid();
    uniqueIdsMap.set(obj, uniqueId);
    return uniqueId;
  }
}