Vue 3 已完全移除过滤器功能，因其破坏模板语法一致性、削弱类型安全、难以追踪维护且与 Composition API 脱节；推荐用 computed、组合式函数或纯函数替代。
Vue 3 中已完全移除过滤器（Filters）功能，不再支持 {{ message | capitalize }} 这类语法。这不是疏忽，而是经过权衡的主动设计——过滤器在 Vue 2 中虽用起来方便，但长期看增加了理解成本、削弱了类型安全和可维护性。
过滤器在 Vue 2 中怎么用？
它分两种注册方式：
-
全局注册：在入口文件中调用
Vue.filter('currency', ...)，所有组件都能用 -
局部注册：在组件选项中声明
filters: { uppercase() { ... } }
模板中通过管道符 | 调用，支持链式（{{ text | lower | truncate }}）和传参（{{ date | formatDate('MM/DD') }}），适合简单格式化场景，比如首字母大写、金额加符号、日期转中文等。
为什么 Vue 3 要把它拿掉？
核心问题不是“不好用”，而是“不该单独存在”：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
语义不统一：大括号内本该是标准 JavaScript 表达式，而
|是 Vue 自定义语法，破坏一致性 - 逻辑分散难追踪：过滤器常定义在不同位置（main.js、mixins、组件内部），大型项目里改一个格式逻辑要翻好几处
-
TypeScript 支持弱：无法推断输入输出类型，比如
currency接收 number 返回 string，IDE 和编译器都无感知 - 性能不可控：每次渲染都执行，哪怕依赖值没变，也没有缓存机制
- 与 Composition API 脱节：setup() 里不能直接调用，需额外包装或挂载，违背组合式逻辑复用初衷
Vue 3 中该怎么替代？
官方推荐按场景选择更自然、更可控的方式：
-
数据仅展示、有响应依赖 → 用
computed：自动缓存，响应式更新，类型推导完整。例如：const formattedPrice = computed(() => `$${price.value.toFixed(2)}`) -
需要传参、多处复用、含副作用 → 封装为函数或组合式函数（composable）：比如
useDateFormatter()或formatCurrency(value, opts)，可单独测试、导入导出、配合 Pinia 使用 -
简单一次性转换 → 直接在模板中调用方法：如
{{ capitalize(name) }}，前提是逻辑极简、不依赖响应式状态
这些方式把格式化逻辑从模板“请回 JavaScript”，让代码职责更清晰，也更容易做 SSR、单元测试和 IDE 智能提示。
迁移时要注意什么？
升级老项目时，别只机械替换语法：
- 检查是否多个组件共用同一过滤器——应统一抽成 composable 或工具函数
- 留意过滤器是否依赖外部状态（如 locale、user preference）——这类逻辑更适合放在 composable 内部响应式管理
- 避免把所有过滤器都改成 methods，否则可能引发重复计算；优先考虑 computed + 函数组合
- 如果团队已有大量全局过滤器，建议新建
src/utils/formatters.ts集中导出纯函数，再按需引入
