Vue.js：数组重排时FileUploader子组件意外重置问题求助

问题出在Vue的列表渲染复用机制以及组件状态的绑定方式上：当你在数组中间插入元素时，即便给外层template设置了child.id作为key，但由于template是虚拟包裹元素，内部的FileUploader组件没有和对应的child实例强绑定，Vue的diff算法可能错误地复用或重建组件实例，导致内部文件输入状态被重置。

方案1：封装独立子组件 #

把每个child对应的按钮和FileUploader封装成单独组件，让每个组件实例与唯一的child绑定，确保Vue能正确跟踪组件实例，避免状态丢失。

子组件 ChildItem.vue #

<template>
  <div>
    <button type="button" @click.prevent="$emit('add-before')">在前方添加</button>
    <FileUploader></FileUploader>
    <button type="button" @click.prevent="$emit('add-after')">在后方添加</button>
  </div>
</template>

<script setup>
defineEmits(['add-before', 'add-after'])
</script>

父组件模板修改 #

<template v-for="(item, index_item) in array" :key="item.id">
  <div>
    <ChildItem
      v-for="(child, index_child) in item.childs"
      :key="child.id"
      @add-before="addChild(index_item, index_child)"
      @add-after="addChild(index_item, index_child + 1)"
    />
  </div>
</template>

方案2：将文件状态提升到父组件（可选，更可靠） #

如果需要更稳定的状态持久化，可将文件状态存储在父组件中，以child.id为唯一标识，通过props传递给FileUploader，彻底解除状态与组件实例的绑定。

父组件逻辑 #

import { ref } from 'vue'

const array = ref([
  { id: uniqueId, childs: [{ id: uniqueId }] },
  { id: uniqueId, childs: [{ id: uniqueId }] }
])
// 用child.id作为键存储对应文件
const uploadFiles = ref({})

const addChild = (index_item, index_child) => {
  const newChild = { id: uniqueId }
  array.value[index_item].childs.splice(index_child, 0, newChild)
  // 初始化新child的文件状态
  uploadFiles.value[newChild.id] = null
}

父组件模板修改 #

<template v-for="(item, index_item) in array" :key="item.id">
  <div>
    <template v-for="(child, index_child) in item.childs" :key="child.id">
      <button type="button" @click.prevent="addChild(index_item, index_child)"></button>
      <FileUploader 
        :child-id="child.id"
        :model-value="uploadFiles[child.id]"
        @update:model-value="uploadFiles[child.id] = $event"
      ></FileUploader>
      <button type="button" @click.prevent="addChild(index_item, index_child + 1)"></button>
    </template>
  </div>
</template>

FileUploader组件修改 #

<template>
  <input 
    type="file" 
    :value="modelValue"
    @change="$emit('update:model-value', $event.target.files[0])"
  />
</template>

<script setup>
defineProps(['modelValue', 'childId'])
defineEmits(['update:modelValue'])
</script>

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