Vue 3 已完全移除模板中 | 管道符调用过滤器的支持，官方推荐改用方法调用或计算属性实现；全局过滤器可通过 $filters 暴露为全局方法，局部过滤器应转为 methods 或 computed。
Vue 3 模板中**不能直接使用 `|` 管道符调用过滤器**，因为 Vue 3 已完全移除对过滤器语法的内置支持。官方明确建议改用 方法调用 或 计算属性 实现相同效果。
全局过滤器的 Vue 3 替代方案
若你原本在 Vue 2 中用 Vue.filter('currency', ...) 注册全局过滤器，Vue 3 中可将其转为全局方法，并通过 $filters 暴露给所有组件：
- 在
main.js（或main.ts）中注册：
const app = createApp(App)
app.config.globalProperties.$filters = {
currency(value) {
return value == null ? '' : `¥${Number(value).toFixed(2)}`;
},
capitalize(str) {
return str?.toString().charAt(0).toUpperCase() + str?.toString().slice(1) || '';
}
}
- 在任意组件模板中调用（注意：不是 `{{ price | currency }}`，而是函数调用）：
<p>{{ $filters.currency(price) }}</p>
<p>{{ $filters.capitalize(name) }}</p>
局部过滤器的 Vue 3 替代方案
原 Vue 2 的 filters: { formatDate() { ... } } 在 Vue 3 中应改为组件内的 方法 或 计算属性：
- 用
methods实现灵活传参（推荐用于需动态参数的场景，如日期格式）：
const formatDate = (timestamp, format = 'yyyy-MM-dd') => {
const d = new Date(timestamp);
return format.replace(/yyyy|MM|dd/g, s => {
switch(s) {
case 'yyyy': return d.getFullYear();
case 'MM': return String(d.getMonth() + 1).padStart(2, '0');
case 'dd': return String(d.getDate()).padStart(2, '0');
}
});
};
<!-- template -->
<p>{{ formatDate(post.time, 'MM/dd/yyyy') }}</p>
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 用
computed实现响应式静态格式化（适合不带参数、依赖响应式数据的场景）：
const price = ref(99.99)
const formattedPrice = computed(() => `¥${price.value.toFixed(2)}`)
<!-- template -->
<p>{{ formattedPrice }}</p>
为什么不再支持 `|` 语法？
Vue 团队指出，过滤器语法破坏了插值表达式“就是 JavaScript”的直觉，增加学习与实现成本；同时，方法和计算属性更显式、更易调试、更符合 Composition API 的逻辑组织方式。链式过滤（如 {{ x | a | b | c }}）在 Vue 3 中自然转化为嵌套函数调用（{{ c(b(a(x))) }}）或组合式逻辑，语义更清晰。
