Vue 3 移除过滤器后,推荐用纯函数+显式调用替代:封装为方法/计算属性、统一管理于 composables、模板中直接调用或使用内联表达式,并注意输入校验与国际化支持。

Vue 3 已移除过滤器(|语法),但字符串格式化需求仍在。安全、清晰、可维护的替代方案不是“找一个新写法”,而是回归函数本质——用纯函数 + 显式调用,配合现代 JavaScript 和模板能力来实现。
用计算属性或方法封装格式逻辑
把原本写在模板里的过滤器逻辑,提前定义为组件内的方法或计算属性,既可复用,又便于测试和调试。
- 方法调用更直观:在模板中写
{{ formatDate(date) }},比{{ date | formatDate }}更易定位逻辑来源 - 支持完整 JS 表达式:可传多个参数、做条件判断、组合其他响应式数据,不受过滤器单输入+链式限制
- 避免隐式依赖:过滤器不参与响应式追踪,而方法/计算属性天然接入 Vue 的依赖系统,值变化时自动更新
用工具函数 + Composition API 统一管理
在 composables/useFormatter.js 中集中导出格式化函数,不依赖 Vue 实例,天然兼容 Vue 2/3、甚至非 Vue 环境。
审查 Vue 管理后台的变更请求(Vue 2 + Element UI,Vue 3 + Element Plus)。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 例如:
export const formatDate = (date, format = 'YYYY-MM-DD') => {...} - 在 setup 中解构使用:
const { formatDate } = useFormatter(),模板中直接{{ formatDate(post.time) }} - 便于单元测试、类型推导(TypeScript 友好)、按需引入(tree-shaking)
模板内用内联函数或插值增强可读性
简单场景无需额外封装,直接在模板中用简洁表达式,比硬套过滤器更轻量、更可控。
立即学习“前端免费学习笔记(深入)”;
- 首字母大写:
{{ title.charAt(0).toUpperCase() + title.slice(1) }} - 金额格式化:
{{ `$${(price / 100).toFixed(2)}` }} - 状态转中文:
{{ status === 'active' ? '启用' : '停用' }} - 注意:仅限逻辑极简、无复用需求的场景;复杂逻辑仍应抽离
字符串格式化本身要防坑
无论用哪种方案,底层字符串处理都要注意安全与健壮性:
- 始终校验输入:空值、
null、undefined、非字符串类型提前处理,避免.toString()报错 - 避免隐式类型转换:如
value + ''不如String(value)明确 - 国际化场景优先用
Intl.DateTimeFormat、Intl.NumberFormat,而非手写格式化逻辑 - 大量文本拼接建议用模板字面量(
`...${x}...`),而非数组join或加号拼接

















