VueJS多视频上传进度条实时更新：监听数组对象调用方法

1. 修正监听逻辑：覆盖所有上传中任务 #

把原有的watch改成深度监听模式，遍历整个tableData数组，对每一个状态为**"In Progress"**且未启动定时器的任务，触发进度更新方法，这样就能支持多视频同时上传的场景。

修改后的watch代码：

watch: {
  tableData: {
    deep: true, // 开启深度监听，捕获数组内对象的属性变化
    handler(newVal) {
      newVal.forEach((item, index) => {
        // 只处理上传中且未启动定时器的任务
        if (item.status === "In Progress" && !item.intervalId) {
          this.handleDisplayStatus(index);
        }
      });
    }
  }
}

2. 优化进度更新方法：避免重复定时器+确保响应式 #

原方法可能重复创建定时器，而且要保证进度修改能触发Vue的响应式渲染。同时在任务完成或状态变化时及时清理定时器。

修改后的handleDisplayStatus：

handleDisplayStatus(index) {
  const task = this.tableData[index];
  // 过滤非上传中任务或已启动定时器的任务
  if (task.task_status !== "IN PROGRESS" || task.intervalId) return;

  const trainingProcessId = task.training_process_id;
  // 创建定时器并保存ID到任务对象
  task.intervalId = setInterval(async () => {
    try {
      const res = await getTrainingProcessInfo({ trainingProcessId });
      const jsonObj = res.data; // 无需重复JSON序列化，直接使用接口返回数据

      // Vue2 用$set确保响应式更新（若completion_progress是初始就有的属性，直接赋值也可）
      this.$set(this.tableData[index], 'completion_progress', jsonObj.completion_progress);
      // Vue3 直接赋值即可：this.tableData[index].completion_progress = jsonObj.completion_progress;

      // 同步更新任务状态（如果接口返回状态字段）
      if (jsonObj.task_status) {
        this.$set(this.tableData[index], 'task_status', jsonObj.task_status);
      }

      // 进度完成或状态变更时停止定时器
      if (jsonObj.completion_progress === 100 || jsonObj.task_status !== "IN PROGRESS") {
        clearInterval(task.intervalId);
        this.$set(this.tableData[index], 'intervalId', null); // 清空ID，防止重复触发
      }
    } catch (error) {
      console.error('获取上传进度失败:', error);
      clearInterval(task.intervalId);
      this.$set(this.tableData[index], 'intervalId', null);
    }
  }, 6000);
}

3. 初始化时启动已有上传任务的监听 #

在组件的mounted钩子中手动遍历一次tableData，启动所有初始状态为**"In Progress"**的任务的进度监听：

mounted() {
  this.tableData.forEach((item, index) => {
    if (item.status === "In Progress") {
      this.handleDisplayStatus(index);
    }
  });
}

核心要点 #

• 深度监听：必须开启deep: true，否则watch只能检测到数组的引用或长度变化，无法捕获内部对象的属性更新。
• 防重复定时器：通过intervalId标记任务是否已启动定时器，避免同一任务被多次触发。
• 响应式保障：Vue2中修改对象新增属性时必须用this.$set，Vue3则无需额外处理，Proxy会自动监听所有属性变化。
• 异常处理：添加请求错误捕获，避免因接口异常导致定时器持续运行。

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