Vue3数组splice删除中间元素后UI渲染值异常求助

你遇到的问题确实是v-for的key使用index导致的。Vue的虚拟DOM diff算法依赖key识别节点唯一性：

• 删除索引1的元素后，原索引2的元素会变为新的索引1
• 由于key基于index生成（item-1），Vue会判定这是原索引1的组件实例并直接复用
• 如果templateItem内部维护了输入字段的局部状态（比如用v-model绑定组件自身data而非直接绑定props），复用的组件会保留旧状态，最终导致UI显示与真实数据不一致

方案1：用元素自身字段组合作为key #

如果业务上每个item的start和end组合唯一，可直接用拼接值作为key：

<templateList v-for="(item, index) in itemList" :key="`${item.start}-${item.end}`">
  <templateItem v-bind="item" />
</templateList>

每个item的key唯一且稳定，删除元素后Vue能正确识别需销毁/保留的节点，不会复用错误组件实例。

方案2：生成新数组触发全量渲染 #

若start和end组合可能重复，可通过替换数组的方式让Vue重新渲染整个列表，替代splice操作：

// 删除索引index的元素
this.itemList = this.itemList.filter((_, idx) => idx !== index)

这种方式会创建新数组，Vue检测到数组引用变化后会重新渲染整个列表，避免组件复用导致的状态残留。缺点是长列表会有轻微性能损耗，但多数场景下足够实用。

方案3：修改子组件同步props状态 #

如果可以修改templateItem，可通过监听props变化同步内部状态：

<!-- templateItem.vue -->
<script>
export default {
  props: ['start', 'end'],
  data() {
    return {
      localStart: this.start,
      localEnd: this.end
    }
  },
  watch: {
    start(newVal) {
      this.localStart = newVal
    },
    end(newVal) {
      this.localEnd = newVal
    }
  }
}
</script>

即使组件被复用，props更新时内部状态也会同步，确保UI与数据一致。

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