vue 3 中用 watch 深度监听响应式文件队列，当所有文件 status 均为 'success'/'error'/'cancelled'（即非 'pending'/'uploading'）时触发“全部上传完成”提示，需开启 deep: true、确保文件对象响应式、加防抖、onbeforeunmount 清理 watch，并用 ui 组件而非 alert 提示。
在 Vue 3 中，用 watch 监听文件上传队列状态实现“全部上传完成”提示，核心是监听队列中每个文件的 status（如 'pending'、'uploading'、'success'、'error'），并在所有文件都进入终态（即非 'pending' 或 'uploading'）时触发提示。
监听队列整体状态变化
推荐将上传队列定义为响应式数组（如用 ref([]) 或 reactive([])），然后用 watch 深度监听其变化。注意开启 deep: true，否则无法捕获数组内对象属性的变化：
- 使用
watch(queueRef, callback, { deep: true }) - 确保队列中每个文件对象是响应式的（比如用
reactive({ name, status, progress })或ref({ ... })包裹） - 避免直接 push 普通对象——应先转为响应式再加入队列
判断“全部上传完成”的逻辑
不是等所有文件都是 'success'，而是等所有文件都**不再处于进行中状态**（即 status 为 'success'、'error' 或 'cancelled'）。常用判断方式：
queue.every(file => ['success', 'error', 'cancelled'].includes(file.status))- 可额外排除
status === 'pending'和'uploading'的情况，更语义清晰 - 建议加防抖或节流（尤其队列大时），避免高频触发提示
结合 onBeforeUnmount 清理副作用
如果上传队列是组件内局部状态，且可能在上传未完成时卸载组件，需手动停止 watch，防止内存泄漏或报错：
- 调用
watch返回的清理函数（如const stop = watch(...)） - 在
onBeforeUnmount中执行stop() - 也可改用
watchEffect+onInvalidate，但watch更易控制时机
显示提示的实用建议
提示不建议用原生 alert，推荐用轻量 UI 方案（如 ElMessage、Toast 或自定义弹层）：
- 成功/失败分别提示：统计
successCount和errorCount后展示汇总信息 - 避免重复提示：可用标志位（如
isNotified = ref(false)）控制只提示一次 - 支持手动重试：提示区域可附带「重试失败项」按钮，重新提交
queue.filter(f => f.status === 'error')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
