VueJs删除数组中间项时后续组件重渲染数据丢失问题

核心问题是v-for的key绑定位置错误，你只给内层嵌套的动态组件绑定了key，但遍历repeats数组、生成每一组输入项容器的外层<div>标签上的v-for完全没有配置key，这也是你之前尝试替换索引为固定对象属性仍然不生效的根本原因——内层的key无法参与外层列表的diff计算。
Vue的虚拟DOM同层diff规则中，没有绑定key的同标签节点会默认采用「就地复用」策略：

• 删除数组中间项后，Vue不会移动后续DOM节点的位置，而是直接按位置顺序，把新数组对应位置的数据更新到现有DOM节点上
• 你给内层组件配置的key，作用域仅限单个外层div的内部，无法跨外层列表节点做身份匹配，完全起不到追踪列表项身份的作用
• 这种就地更新逻辑会直接触发删除位置之后所有列表项组件的重渲染，组件内部未同步到响应式数据的输入状态、手动修改的DOM内容，都会被虚拟DOM的更新逻辑覆盖丢失。
  你观察到的「组件key未变化但仍然重渲染」，本质是外层无key导致的父节点更新连带触发了内层组件的渲染更新，和内层组件本身的key配置无关。

• 给直接绑定v-for指令的外层div配置稳定、唯一、不随数组位置变化的key：新增列表项时，给每个repeat项生成一个永久不变的唯一标识（比如时间戳+随机值的id），不要用循环索引作为key，避免位置变化导致key失效。
• 内层动态组件的key建议和外层列表项的唯一标识绑定，确保全局唯一，避免不同列表项内的同名字段出现key重复。
• 组件内的输入框值必须通过v-model绑定到响应式状态，不要直接留存非响应式的DOM修改，避免重渲染时状态丢失。

<template>
  <!-- 外层v-for直接绑定稳定唯一key -->
  <div v-for="(repeat, count) in repeats" :key="repeat._uid">
      <template v-for="field in repeat">
          <component
              :is="field.component" 
              :content="field.content"
              <!-- 内层key和外层uid组合，保证全局唯一 -->
              :key="repeat._uid + '_' + field.name"
          >
          </component>
      </template>
      <button @click="remove(count)">Remove</button>
  </div>
  <button @click="add">Add</button>
</template>

<script>
export default {
  data() {
    return {
      repeats: []
    }
  },
  methods: {
    add() {
      const newFields = this.cloneFields();
      // 给新增项添加永久不变的唯一标识
      newFields._uid = `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
      this.repeats.push(newFields);
    },
    remove(index) {
      this.repeats.splice(index, 1);
    },
  }
}
</script>

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