vue 3 中已移除 vue.filter 和管道符语法，uni-app 3.0+ 同步废弃；单值转换用 computed，多参复用用纯函数封装，全局共享可挂载到 app.config.globalproperties。
Vue 3 的 setup 里不能用 | 管道符
uni-app 基于 Vue 3 时（即 @dcloudio/uni-app 版本 ≥ 3.0.0-alpha），Vue.filter 已彻底移除，模板中写 {{ value | formatTime }} 会直接报错或渲染为空。这不是配置问题，是 Vue 官方 API 层面的删除——没有兼容层，也没有编译降级开关。
用 computed 替代单值过滤场景
对简单、确定性转换（如状态码转文字、日期截取、字符串首字母大写），computed 最轻量也最可控：
- 避免模板内重复调用：每个
v-for项都触发一次计算，computed自动缓存，值不变就不重算 - 类型安全：TS 能推断输入输出类型，比如
statusText: ComputedRef<string></string> - 调试友好：可在
console.log或 debugger 中直接查看计算结果，不像过滤器链那样黑盒
示例（状态码映射）：
import { computed } from 'vue'
const props = defineProps({
status: {
type: [String, Number],
default: ''
}
})
const statusText = computed(() => {
const map = { '0': '正常', '1': '待审核', '2': '已拒绝', '3': '已通过' }
return map[props.status + ''] || '未知状态'
})
模板中直接写 {{ statusText }}，无需括号、无参数歧义、不依赖全局注册时机。
用 function 封装多参数或复用逻辑
当需要传参（如 formatDate(date, 'YYYY-MM-DD HH:mm')）、或跨组件复用时，别硬塞进 computed，改用普通函数：
- 放在
utils/format.js里导出，按需引入，和平台无关 - 函数必须是纯的（无副作用、无 this 依赖），否则在 H5 和小程序端行为可能不一致
- 避免在模板中直接调用带副作用的函数（如发请求），否则可能被多次执行
示例（格式化日期）：
// utils/format.js
export function formatDate(date, fmt = 'YYYY-MM-DD') {
if (!date) return ''
const d = new Date(date)
if (isNaN(d.getTime())) return ''
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
if (fmt === 'YYYY-MM-DD') return `${year}-${month}-${day}`
if (fmt === 'YYYY-MM-DD HH:mm') {
const hour = String(d.getHours()).padStart(2, '0')
const minute = String(d.getMinutes()).padStart(2, '0')
return `${year}-${month}-${day} ${hour}:${minute}`
}
return ''
}
组件内使用：
import { formatDate } from '@/utils/format'
const props = defineProps({ timestamp: [String, Number] })
const displayTime = formatDate(props.timestamp, 'YYYY-MM-DD HH:mm')
注意：这里 displayTime 是常量，若 props.timestamp 可变，应包一层 computed 或用 watch 更新。
全局逻辑统一管理：用 app.config.globalProperties
如果项目里大量页面都要用同一套格式化函数（如金额、手机号脱敏），又不想每个组件都 import，可用 Vue 3 的全局属性挂载：
- 必须在
main.js（或main.ts）中createApp(App)之后、app.mount()之前设置 - 挂载对象必须是 plain object，不能是 class 实例或带 this 的方法
- 命名建议加前缀（如
$fmt），避免和未来 uni-app 内置属性冲突
示例：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { formatDate, formatMoney } from '@/utils/format'
const app = createApp(App)
app.config.globalProperties.$fmt = {
date: formatDate,
money: formatMoney
}
app.mount('#app')
组件模板中即可：{{ $fmt.date(item.time, 'YYYY-MM-DD') }}。注意这不是过滤器语法，而是方法调用，括号和参数完全合法。
真正容易被忽略的是：全局挂载后，H5 端能直接访问 this.$fmt，但小程序端需确认 app.config.globalProperties 是否被 uni-app 运行时透传——实测 3.3+ 版本支持，低于此版本建议降级为显式 import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
