uni-app 3.x(vue 3)已移除全局过滤器filters,应改用computed或方法进行单位换算;downspeedkbps需除以1024转mb/s,注意区分b(字节)与b(比特),并做好空值和非数字兜底。

uni-app里没有全局过滤器,filters选项在Vue 3 + uni-app 3.x中已被移除
你如果在 Vue 2 版本的 uni-app 项目里写过 filters,那它确实能用;但当前主流(HBuilderX 4.2+、uni-app 3.x)默认基于 Vue 3,filters 已被官方废弃,编译时直接忽略,不会报错也不会生效。别白费力气在 setup() 里定义或在模板中写 {{ speed | bpsToMbps }} —— 它不工作。
推荐用计算属性或方法做单位换算,更可控也更易调试
网络速度单位换算是纯数值处理,没必要抽象成过滤器。直接在组件逻辑里处理,清晰又稳定:
-
downSpeedKBps是插件返回的 KB/s 值(注意是大写的K,即 1024 字节),要转 MB/s 就除以 1024(不是 1000) - 显示时保留 1–2 位小数,避免
0.00092这种难读数字 - 建议加空值/非数字兜底,防止插件未就绪时
NaN泄露到界面
// 示例:在 setup() 中
const downSpeedKBps = ref(0);
const downSpeedMBps = computed(() => {
if (typeof downSpeedKBps.value !== 'number' || isNaN(downSpeedKBps.value)) return '--';
return (downSpeedKBps.value / 1024).toFixed(1);
});
别混淆 Bps 和 bps,uni-app 插件返回的是字节(B),不是比特(b)
这是最容易出错的地方。很多开发者看到「MBps」就下意识除以 8,结果数值小了 8 倍:
-
upSpeedKBps和downSpeedKBps的单位是 千字节每秒(KB/s),即 1024 字节/秒 - 1 MB/s = 1024 KB/s → 换算只需除以 1024
- 1 Mbps(兆比特每秒)= 1000 × 1000 ÷ 8 = 125000 字节/秒 ≈ 122 KB/s,和插件单位不匹配,硬套会错
如果你真要显示 Mbps,得先确认业务是否需要——多数 App 提示“网速慢”只关心下载体验,用 MB/s 更符合用户直觉(比如“2.3 MB/s 下载一个 100MB 文件约需 43 秒”)。
模板里直接调用方法也行,但注意响应性限制
如果换算逻辑简单且只在单个地方用,写个内联方法更轻量:
<text>{{ formatSpeed(downSpeedKBps) }} MB/s</text>
// methods 或 script setup 中
const formatSpeed = (kbps) => {
if (!Number.isFinite(kbps)) return '--';
return (kbps / 1024).toFixed(1);
};
不过要注意:该方法每次渲染都会执行,若传入的是响应式 ref,必须解包(kbps.value)或用 unref(),否则可能得到 [object Object]。
真正麻烦的从来不是怎么除以 1024,而是忘了插件返回值可能是 null、undefined 或字符串;上线后用户反馈“速度一直显示 --”,大概率是这里没守好边界。











