Vue 过滤器链会按照从左到右的顺序依次执行，例如 {{value|filterA|filterB}} 等价于 filterB(filterA(value))。使用前需要先完成过滤器注册，同时要避免在参数中编写复杂表达式，并留意 null/undefined 的传递以及高频渲染带来的性能影响。
在 Vue 或 uni-app 页面模板中，直接使用 | 就能连续进行多个过滤器的链式调用。不过要重点关注执行顺序与参数传递是否符合预期，因为过滤器会按从左到右的顺序逐个执行，前一个过滤器的输出结果会作为后一个过滤器的输入值。
多个过滤器连用的语法和执行顺序
Vue 的过滤器链本质上是左结合的，也就是说，{{ value | filterA | filterB }} 实际上等同于 filterB(filterA(value))。例如，想先格式化时间再截取前 10 位，可以写成：{{ timestamp | formatDate | slice(0, 10) }}。这里尤其要注意，slice 必须是预先注册过的过滤器，不能直接当作 JavaScript 原生方法在模板中调用。
- 所有过滤器都要提前进行全局注册或局部声明，否则运行时可能静默失效，控制台不一定报错，但页面渲染结果会为空
- 带参数的过滤器，括号中建议写固定值或引用
data中的响应式字段，通常不适合直接写复杂表达式，例如{{ value | filterA(item.id + '_suffix') }} - 如果前面的过滤器返回了
null或undefined，后续过滤器会继续接收到这个值，进而可能触发 TypeError 等异常
全局过滤器 vs 局部过滤器混用的注意事项
全局过滤器通常在 main.js 中通过 Vue.filter() 注册，注册后对整个项目或所有页面都可生效；局部过滤器则只在当前 .vue 文件的 filters 选项里定义，仅当前组件可用。两者可以同时存在，但如果名称相同，局部过滤器会优先覆盖全局过滤器。
- 要尽量避免命名冲突：例如全局已经定义了
price，而页面中又声明了同名局部过滤器，那么该页面实际调用的就是局部版本 - 局部过滤器不能直接被其他页面复用，如果需要跨页面共享过滤逻辑，建议提取为全局过滤器，或封装成工具函数后再统一调用
- 调试时要留意作用域差异：H5 端可以通过
Vue.options.filters查看全局过滤器列表，小程序端则更适合使用 console.log 逐步确认是否注册成功
常见错误：链式调用中传参失效或结果异常
比较常见的问题是把带参数的过滤器写成 {{ value | filterA('a', 'b') | filterB }} ——在 Vue 2（也是 uni-app 当前常用基础）中，这属于非法写法，编译阶段通常就会直接报出 Invalid expression 错误。
- 更稳妥的做法是把多参数过滤器改造成接收一个对象，例如：
{{ value | mergeOptions({ type: 'list', size: 20 }) }} - 也可以拆分成多个单参数过滤器进行组合使用，例如
{{ value | withType('list') | withSize(20) }} - 如果过滤器内部包含副作用操作，比如发送请求、修改全局状态等，那么在链式调用场景下会让问题排查更复杂，因此更推荐将过滤器设计为纯函数
另外一个非常容易被忽视的问题是：过滤器在 v-for 循环中会被高频调用，而且默认没有缓存机制，每次组件重新渲染时都会再次执行。简单的数值转换影响通常不大，但如果涉及正则匹配、JSON 解析、字符串格式化或复杂条件判断，建议提前放到 computed 或 data 初始化阶段处理，不要把所有计算逻辑都堆积在模板里，这样对页面性能和可维护性都会更友好。
