Vue 3 移除过滤器后，推荐用纯函数+显式调用替代：封装为方法/计算属性、统一管理于 composables、模板中直接调用或使用内联表达式，并注意输入校验与国际化支持。
Vue 3 已移除过滤器（|语法），但字符串格式化需求仍在。安全、清晰、可维护的替代方案不是“找一个新写法”，而是回归函数本质——用纯函数 + 显式调用，配合现代 JavaScript 和模板能力来实现。
用计算属性或方法封装格式逻辑
把原本写在模板里的过滤器逻辑，提前定义为组件内的方法或计算属性，既可复用，又便于测试和调试。
- 方法调用更直观：在模板中写
{{ formatDate(date) }}，比{{ date | formatDate }}更易定位逻辑来源 - 支持完整 JS 表达式：可传多个参数、做条件判断、组合其他响应式数据，不受过滤器单输入+链式限制
- 避免隐式依赖：过滤器不参与响应式追踪，而方法/计算属性天然接入 Vue 的依赖系统，值变化时自动更新
用工具函数 + Composition API 统一管理
在 composables/useFormatter.js 中集中导出格式化函数，不依赖 Vue 实例，天然兼容 Vue 2/3、甚至非 Vue 环境。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 例如：
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或加号拼接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
