Vue3中v-for循环无法随数据变更更新内容的问题求助

核心问题在于原生File对象是浏览器提供的非响应式特殊对象，直接给它新增status和progress属性时，Vue3的响应式系统无法追踪这些属性的变化，导致v-for循环无法捕获更新，始终显示旧状态。

1. 将原生File对象转为响应式普通对象 #

在prepareValidate方法中，不要直接操作原生File对象，而是将其解构为普通JavaScript对象，再添加自定义属性后推入数组：

修改prepareValidate里的循环代码：

// 原代码
for (let i = 0; i < files.length; i++) {
  let file = files[i]
  
  if (!this.validateFile(file)) {
    return
  }

  file.status = 'pending'
  file.progress = 0

  this.uploadResults.push(file)
}

替换为：

for (let i = 0; i < files.length; i++) {
  const rawFile = files[i]
  
  if (!this.validateFile(rawFile)) {
    return
  }

  // 将原生File对象转为普通对象，添加自定义属性
  const fileItem = {
    ...rawFile,
    status: 'pending',
    progress: 0
  }

  this.uploadResults.push(fileItem)
}

2. （可选）优化updateFileStatus方法 #

修改后直接修改属性即可触发响应，可调整代码让逻辑更清晰：

updateFileStatus(status, progress, fileIndex) {
  const file = this.uploadResults[fileIndex]
  file.status = status
  file.progress = progress
}

3. （可选）优化v-for的key值 #

当前使用fileIndex作为key，在数组元素顺序变化时可能导致渲染异常，建议改用文件的唯一标识：

<template v-for="(file, fileIndex) in uploadResults" :key="`${file.name}-${file.size}`">

Vue3的响应式系统基于Proxy实现，只能追踪普通JavaScript对象/数组的属性变化。原生File对象属于浏览器内置特殊对象，无法被Proxy正确代理，因此新增的属性无法触发视图更新。将其转为普通对象后，Vue就能正常追踪属性变更。

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