在 vue 3 中应使用 computed 格式化日期，它响应式、自动缓存、语义清晰；支持多格式派生、空值兜底，并可通过组合式函数复用逻辑。
在 Vue 3 模板中优雅地格式化日期，核心是用 computed 将原始日期转为可读、稳定、响应式的字符串，而不是在模板里拼日期或调方法。它自动缓存、只在日期变时重算，比 methods 更轻量，比内联表达式更清晰。
用 computed 封装格式化逻辑（推荐）
把日期处理逻辑从模板抽离到 computed，让模板只负责展示：
- 定义一个响应式源（比如
ref或reactive的日期字段） - 在
computed中新建一个格式化后的值，内部用原生Date、Intl.DateTimeFormat或dayjs/date-fns - 模板中直接写
{{ formattedDate }}—— 不加括号、不传参、不担心重复执行
示例（使用 dayjs）：
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
const rawDate = ref('2026-09-24T10:30:00Z')
const formattedDate = computed(() =>
dayjs(rawDate.value).format('YYYY年MM月DD日 HH:mm')
)
模板：<p>发布时间：{{ formattedDate }}</p>
支持多格式、按需切换
同一个原始日期，可派生多个计算属性适配不同场景：
-
dateShort→'2026-09-24' -
dateLong→'2026年9月24日 星期四' -
dateAgo→'2小时前'（需配合dayjs().from()）
每个都独立响应、互不影响，模板按需取用，语义清晰。
处理空值与异常更稳妥
原始日期可能为空、非法字符串或 null。在 computed 中统一兜底，避免模板报错：
const formattedDate = computed(() => {
if (!rawDate.value) return '–'
try {
return dayjs(rawDate.value).isValid()
? dayjs(rawDate.value).format('MM/DD HH:mm')
: '无效日期'
} catch {
return '解析失败'
}
})
这样模板始终能安全渲染，不用每个地方都加 v-if 或三元判断。
搭配组合式函数复用（中大型项目）
如果多个组件都要格式化日期，不要复制粘贴 computed。可封装成组合式函数：
// composables/useDateFormat.js
import { computed } from 'vue'
import dayjs from 'dayjs'
export function useDateFormat(date, format = 'YYYY-MM-DD') {
return computed(() => {
return date.value ? dayjs(date.value).format(format) : ''
})
}
组件中直接用：
import { useDateFormat } from '@/composables/useDateFormat'
const rawDate = ref('2026-09-24')
const displayDate = useDateFormat(rawDate, 'MMM DD, YYYY')
逻辑复用、类型友好、测试方便。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
