uni-app中filter千分位无效因Vue 2模式下小程序平台忽略filters、Vue 3已移除；应改用toLocaleString()、工具函数或计算属性。
uni-app 里用 filter 实现千分位格式化为什么无效？
因为 uni-app 的 Vue 2 模式（目前主流）中，filters 选项在 H5 和小程序平台表现不一致：H5 支持，但微信小程序等平台编译时会被忽略，且 Vue 3 已完全移除 filters。直接写在模板里的 {{ price | toThousands }} 在 App 或小程序里大概率不生效，甚至报错 filters is not defined。
实操建议：
- 放弃全局或局部
filters定义，改用计算属性、方法调用或自定义指令 - 若必须复用逻辑，优先封装为工具函数，而非过滤器
- 检查项目
vueVersion配置（vue.config.js或manifest.json），确认是否误启用了 Vue 3 模式（此时filters语法根本不可用）
用 toLocaleString() 快速实现千分位，但要注意兼容性
Number.prototype.toLocaleString() 是最轻量的方案，但不同平台对 locale 和 options 支持程度不同。微信小程序基础库 2.27.0+ 才完整支持 { useGrouping: true }，低版本会回退为默认行为（可能无分隔符或用空格）。
实操建议：
- 简单数字显示可直接用：
{{ (price || 0).toLocaleString('zh-CN') }} - 需兼容旧版小程序时，加兜底逻辑：
{{ isNaN(price) ? '0' : (price || 0).toLocaleString('en-US').replace(/,/g, ',') }}（注意：这里只是示意替换逻辑，实际应判断环境） - 避免传入字符串，否则在某些平台返回原字符串，不触发格式化
- 负数、小数均支持，但
toLocaleString()对小数位数不控制，如需固定两位小数，得组合toFixed(2)再转 —— 但注意toFixed返回字符串，要再转 Number 才能继续toLocaleString
手写正则千分位函数，可控性强但容易漏掉边界情况
正则方案看似灵活，但常见错误是没处理负号、小数点、科学计数法或空值。比如 str.replace(/(\d)(?=(\d{3})+\.)/g, ',') 在 -1234567.89 上就会错乱。
实操建议：
- 推荐使用这个健壮版本（已验证 uni-app 各平台）：
function toThousands(num) {
if (num == null || num === '') return '0'
const n = Number(num)
if (isNaN(n)) return '0'
const [integer, decimal] = String(n).split('.')
const sign = n
- 务必先
Number()转换，避免字符串拼接导致的隐式类型问题 - 小程序里不要用
Intl.NumberFormat—— 大部分基础库版本不支持，且体积大 - 如果数字来自后端 API，注意是否已是字符串（如 "1234567.89"），避免双重转换出错
在 v-for 列表里高频调用千分位，性能怎么扛？
每次渲染都执行格式化函数，在长列表（如商品瀑布流）中会明显卡顿，尤其低端安卓机。Vue 的响应式系统不会缓存函数调用结果，{{ toThousands(item.price) }} 每次 diff 都重算。
实操建议：
- 数据层预处理：请求回来后，用
map一次性添加格式化字段，如list.map(i => ({ ...i, priceFmt: toThousands(i.price) })) - 用计算属性包裹整个列表（适合数据不变场景）：
computed: { formattedList() { return this.list.map(...); } } - 绝对不要在模板里写带参数的函数调用（如
toThousands(item.price)），这是 Vue 性能红灯区 - 若需动态切换格式（如切货币单位），用
watch监听变化后批量更新格式字段，而非实时计算
真正麻烦的是异步加载+滚动复用场景，这时候得结合虚拟滚动或分页，千分位只是表象，底层数据结构设计才是关键。
