vue 3 已移除过滤器，字符串截断和日期格式化需用计算属性、方法调用或组合式函数实现；推荐初学者在模板中调用格式化方法，中大型项目封装为可复用的组合式函数。
在 Vue 3 模板中，不能直接使用过滤器（filter）——因为 Vue 3 已经完全移除了 Vue.filter 和模板中的 | filterName 语法。所以“字符串截断”和“日期格式化”这类操作，需改用 计算属性、方法调用或组合式函数封装 的方式实现，既保持响应式，又符合 Vue 3 的设计规范。
在模板中调用格式化方法（推荐初学者）
你可以在 <script setup></script> 中定义一个格式化函数，然后在模板双大括号中直接调用：
// script setup
import { format } from 'date-fns' // 或 dayjs
const formatDate = (date, pattern = 'yyyy-MM-dd') => {
if (!date) return ''
try {
return format(new Date(date), pattern)
} catch {
return ''
}
}
const truncate = (str, len = 20) => {
if (!str || typeof str !== 'string') return ''
return str.length > len ? str.slice(0, len) + '...' : str
}
<!-- template -->
<p>{{ formatDate(item.createdAt) }}</p>
<p>{{ truncate(item.title, 15) }}</p>
⚠️ 注意：模板中调用的方法会在每次组件更新时重新执行，避免在函数内修改响应式数据或发起请求。
使用 computed 封装常用格式化（适合固定字段）
对单个值做稳定转换，用 computed 更高效（仅依赖变化时重算）：
import { computed } from 'vue'
import { format } from 'date-fns'
const props = defineProps(['item'])
const displayDate = computed(() => {
return format(new Date(props.item.date), 'MMM d, yyyy')
})
const shortTitle = computed(() => {
const t = props.item.title || ''
return t.length > 12 ? t.slice(0, 12) + '…' : t
})
<span>{{ displayDate }}</span>
<span>{{ shortTitle }}</span>
封装为可复用的组合式函数（适合中大型项目）
把逻辑抽成 composable，例如 useFormatter.js：
// composables/useFormatter.js
import { format } from 'date-fns'
export function useFormatter() {
const formatDate = (date, pattern = 'yyyy-MM-dd HH:mm') => {
if (!date) return ''
return format(new Date(date), pattern)
}
const truncate = (str, len = 20, suffix = '…') => {
if (typeof str !== 'string') return ''
return str.length <p>在组件中使用：</p><pre class="brush:js;toolbar:false;"><script setup>
import { useFormatter } from '@/composables/useFormatter'
const { formatDate, truncate } = useFormatter()
</script>{{ formatDate(post.publishedAt, 'PPp') }}
{{ truncate(post.content, 50) }}这样写法清晰、易测试、可跨组件复用。
不推荐的做法（容易踩坑）
- ❌ 在模板里写复杂表达式：
{{ item.date ? new Date(item.date).toLocaleDateString() : '' }}
→ 可读性差、无法复用、错误难捕获 - ❌ 试图在 Vue 3 中注册全局 filter 并使用
|语法
→ Vue 3 不支持，会报错或静默忽略 - ❌ 在
formatDate()方法里触发 API 请求或修改ref
→ 模板函数应是纯函数，否则破坏响应式预期
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
