computed 用于派生上传进度百分比，需基于响应式的 uploadedbytes 和 filesize；它不处理上传逻辑或监听事件，仅实时计算并格式化百分比值，避免手动更新和副作用。
在 Vue 3 中，computed 本身不直接处理上传逻辑或监听进度事件，但它非常适合**派生计算已上传字节数占总文件大小的百分比**——前提是你的分片上传逻辑已将当前已上传的总字节数（uploadedBytes）和文件总大小（fileSize）作为响应式数据暴露出来。
核心思路：用 computed 派生百分比值
只要 uploadedBytes 和 fileSize 是响应式变量（如 ref 或 reactive 中的属性），你就可以用 computed 安全、高效地实时计算并格式化进度百分比：
- 避免手动更新百分比变量，减少副作用
- 自动响应字节变化，无需额外 watch
- 天然支持模板中直接使用，也支持在 setup 中解构使用
基础实现示例（组合式 API）
假设你已通过分片上传管理器维护了两个响应式状态：
const uploadedBytes = ref(0); // 已成功上传的总字节数（含所有完成的分片） const fileSize = ref(0); // 原始文件总大小（单位：字节）
然后在 setup() 中定义计算属性：
const uploadProgress = computed(() => {
if (fileSize.value === 0) return 0;
return Math.round((uploadedBytes.value / fileSize.value) * 100);
});
你可以在模板中直接使用：
<div class="progress">
<div class="bar" :style="{ width: uploadProgress + '%' }"></div>
<span>{{ uploadProgress }}%</span>
</div>
进阶建议：增强健壮性与用户体验
-
防止除零和 NaN：如上例所示，显式判断
fileSize.value === 0，返回 0 而非NaN或Infinity -
限制小数位数（可选）：若需更平滑的视觉效果（如显示 99.7%），可用
Math.min(100, parseFloat(...).toFixed(1))，但注意返回的是字符串，建议统一转为 number 处理 -
区分「上传中」与「已完成」状态：可额外定义一个 computed 判断是否完成：
const isUploadComplete = computed(() => uploadedBytes.value >= fileSize.value)，便于控制按钮禁用、提示文案等 -
不要在 computed 中触发副作用：比如不要在 computed 里调用
console.log或发送请求——它只用于纯计算。进度日志应在分片上传成功的回调中处理
注意：computed 不替代上传逻辑本身
computed 只是“看结果”，不是“做事情”。真正的分片上传、并发控制、错误重试、分片索引管理、XMLHttpRequest.upload.onprogress 或 fetch 流式上传监听，都需要你在业务逻辑层自行实现，并确保每次分片成功后正确更新 uploadedBytes.value（例如：每片 1MB 传完就 += 1048576）。
只要这个更新是响应式的，uploadProgress 就会自动更新——这就是 Vue 响应式系统的价值所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
