uni-app过滤器须为纯函数，仅依赖传入参数（如coupon对象）返回文案，不可访问this或调用响应式方法；应避免副作用、平台兼容问题及性能隐患，复杂逻辑推荐改用methods或computed。
uni-app 中过滤器函数怎么写才能动态生成满减文案
过滤器在 uni-app 里本质是纯函数，接收原始值（比如 coupon 对象），返回格式化后的字符串。它不能访问 this、不能触发响应式更新、也不能调用组件方法——所以满减文案逻辑必须完全基于传入参数计算。
常见错误是把 minAmount 和 discount 当作独立变量传入，结果多个优惠券共用同一过滤器时文案错乱。正确做法是传整个优惠券对象，让过滤器自己解构：
// filters.js
export const couponDesc = (coupon) => {
if (!coupon || typeof coupon !== 'object') return ''
const { minAmount, discount, discountType } = coupon
if (discountType === 'fixed') {
return `满<code>${minAmount}</code>减<code>${discount}</code>`
}
if (discountType === 'percent') {
return `满<code>${minAmount}</code>享<code>${discount}</code>折`
}
return `满<code>${minAmount}</code>减<code>${discount}</code>`
}
在页面中注册并使用：
<template>
<view v-for="c in couponList" :key="c.id">
{{ c | couponDesc }}
</view>
</template>
<script>
import { couponDesc } from '@/filters'
export default {
filters: { couponDesc }
}
</script>
为什么不能在过滤器里调用 this.$t 或 this.utils.formatMoney
过滤器运行时上下文不是组件实例，this 是 undefined。试图访问 this.$t 会直接报错 Cannot read property '$t' of undefined；调用工具方法同理。
解决方案只有两个：
- 把国际化 key 或格式化后的数值提前算好，作为字段塞进
coupon对象（例如后端返回descZh字段） - 改用计算属性或方法：在
computed或methods中处理，再绑定到模板，虽然多写几行，但可控性强、可 debug、支持异步（比如需要查汇率再算折后价）
尤其注意金额类展示：如果后端返回的是分单位整数，过滤器里硬写 Math.floor(val / 100) 容易出错（没补零、没处理负数、没考虑小数位），不如统一交给 utils.formatMoney(val) 处理——那就别放过滤器里。
v-for 渲染优惠券列表时，过滤器性能有影响吗
有，但通常可忽略。过滤器每次渲染都会执行，如果 couponList 有 50 条，且每条都用 {{ item | couponDesc }}，就调用 50 次函数。只要函数体不涉及 DOM 查询、JSON.parse 大字符串、或循环遍历内部数组，耗时基本在微秒级。
真正要警惕的是「在过滤器里请求接口」或「调用 new Date().toLocaleString()」这类副作用操作——这不仅性能差，还会导致 SSR 失败、H5 端首屏白屏、小程序 setData 超时。
如果发现列表滚动卡顿，优先检查是否误把复杂逻辑塞进了过滤器，而不是怪 uni-app 的过滤器机制。
小程序平台下过滤器不生效的典型原因
微信小程序编译模式下，过滤器只在 H5 和 App 端默认启用，小程序端需要手动开启兼容配置，否则 {{ item | xxx }} 会被直接当字符串渲染，显示为 "[object Object] | couponDesc" 这种。
解决方式是在 vue.config.js 或 vue.config.ts 中加：
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false
})
]
},
// 小程序平台必须显式启用过滤器支持
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0].__UNI_FILTERS__ = JSON.stringify(true)
return args
})
}
}
更简单的方式是放弃过滤器，改用方法调用：{{ getCouponDesc(c) }}，配合 methods: { getCouponDesc } ，一来避免平台差异，二来调试方便，三来 IDE 能跳转、能断点。
实际项目里，超过三层嵌套的优惠规则（比如“满300减50，再叠加品类券9折”）几乎不可能靠单个纯函数说清，这时候过滤器就该退场了。
