Vue的v-for循环中如何为input生成固定不变的uuid作为id属性

核心原因：你当前在模板的属性绑定中直接调用uuid()，Vue每次触发组件重渲染时都会重新执行模板内的所有表达式，导致每次都生成新的ID，只要保证每个项的UUID仅生成一次即可解决问题。

方案1：初始化form数组时预注入UUID字段（优先推荐） #

如果允许修改form数组的结构，直接在拿到原始form数据后遍历给每一项预生成固定UUID即可，性能最高逻辑最简单。

预处理form数据代码： #

// 假设originForm是你拿到的原始form数组数据
const form = ref(originForm.map(item => {
  return {
    ...item,
    // 仅在初始化时生成一次UUID，后续不会变更
    _inputUuid: uuid()
  }
}))

模板代码修改为： #

<div v-for="(data) in form" :key="data.attribute">
  <input 
    type="date" 
    :min="today" 
    :id="`_${data._inputUuid}`" 
    :name="data.attribute" 
    :placeholder="data.default_value" 
    :readonly="data.render_type == 'readonly'" 
    v-model="data.value" 
    @input.prevent="updateOuter($event, data.refresh, 'due_date')"
    ...
  >
</div>

方案2：缓存映射表存储UUID（适合不能修改原form结构的场景） #

如果form数据来自外部不允许新增自定义字段，可以用Map做缓存，取ID时如果已经生成过就直接返回缓存值，没有才生成新值存入缓存。

定义缓存与取值方法： #

// 存储对应项的UUID缓存
const uuidCache = new Map()

const getFixedUuid = (cacheKey) => {
  if (!uuidCache.has(cacheKey)) {
    uuidCache.set(cacheKey, uuid())
  }
  return uuidCache.get(cacheKey)
}

模板代码修改为： #

<!-- 用循环索引+data.attribute组合成缓存key，避免同页面重复元素的key冲突 -->
<div v-for="(data, index) in form" :key="data.attribute">
  <input 
    type="date" 
    :min="today" 
    :id="`_${getFixedUuid(`${index}-${data.attribute}`)}`" 
    :name="data.attribute" 
    :placeholder="data.default_value" 
    :readonly="data.render_type == 'readonly'" 
    v-model="data.value" 
    @input.prevent="updateOuter($event, data.refresh, 'due_date')"
    ...
  >
</div>

注意：如果form数组有动态增删项的需求，对应删除项时同步删除uuidCache中对应的key即可避免内存泄漏。

内容的提问来源于stack exchange，提问作者user16732355