Vue 3 中管道符被移除？教你用组合式 API 优雅替代
近期趋势
近期，开发者社区中关于 Vue 3 是否“移除管道符”的讨论逐渐增多。实际上，Vue 3 并未直接删掉管道符语法，但在官方组合式 API 的推荐实践中，管道符（即 | 用于数据转换的简写模式）在模板内的使用场景明显减少。官方更鼓励通过 computed 或工具函数在脚本逻辑中完成数据格式化，从而让模板保持纯声明式。
这种趋势并非凭空而来——组合式 API 的普及使得管道符的替代方案更加优雅且可测试，符合前端工程化对逻辑复用的需求。许多开发者开始主动将模板内管道符逻辑迁移至组合函数（Composables）中。
行业背景
管道符（Pipe）在 Angular 中是原生语法，而 Vue 早期版本借鉴了这一概念，允许在模板中通过 | 快速调用过滤器。但 Vue 3 团队在 RFC 讨论中明确指出，过滤器存在若干问题：
- 作用域混乱，调试困难
- 不利于 TypeScript 类型推导
- 难以在组件外部共享或测试
因此 Vue 3 的 Options API 仍然保留 filters 选项，但在组合式 API 中官方并未提供对应的 useFilters 内置方法。这导致不少从 Options API 迁移的开发者误以为“管道符被移除”，实际上是官方引导开发者采用更现代的逻辑组织方式。
用户关注点
开发者最关心三个问题：
- 能否在 Vue 3 组合式 API 中继续使用管道符？ —— 可以，但通常需要手动将过滤函数定义为全局或局部方法，再在模板中调用，失去了
|的简洁性。 - 如何替代管道符？ —— 最直接的替代是通过
computed在setup或<script setup>中产出转换后的数据。例如将{{ price | currency }}改写为{{ formattedPrice }}，并在computed中封装currency逻辑。 - 替代后是否影响性能？ ——
computed本身基于响应式依赖缓存，性能通常优于管道符的每次渲染重新计算；但若过滤逻辑非常轻量（如简单字符串大小写转换），两者差异可忽略。
可能影响
迁移要求开发者改变模板编写习惯：
- 模板变得更干净：所有数据转换集中在
computed或工具函数中，便于单元测试。 - 逻辑复用更容易：可将通用格式化逻辑抽取为组合函数（如
useCurrencyFormat），在不同组件中导入使用。 - 学习曲线略有上升：新人需要先熟悉组合式 API 中的响应式数据处理，而非直接套用管道符。
对于大型项目，重构管道符为组合式逻辑不会产生短期显著优势，但长期维护性和类型安全性会提升。
后续观察
官方目前没有恢复管道符语法的计划。社区中出现了一些第三方库（例如 vue-use-filters）试图模拟管道符行为，但使用率和维护力度有限。预计未来 Vue 生态将彻底消化组合式 API 的范式，模板内管道符会逐渐成为历史写法。开发者在学习 Vue 3 时，应将重点放在 computed、watch 以及自定义组合函数上，而非寻找管道符的替代插件。
总结要点：
- Vue 3 组合式 API 不内置管道符，官方建议用
computed替代。- 迁移后模板更纯净、逻辑可测试、类型推导更友好。
- 短期需调整习惯，长期受益于工程化实践。