Day.js基本使用

在 Vue3 项目开发中时间处理是绕不开的高频需求——比如格式化接口返回的时间戳、计算两个日期的差值、转换时区、展示相对时间如“3分钟前”。提到时间处理很多开发者会先想到 Moment.js但它体积偏大约200KB在追求轻量的 Vue3 项目中显得有些“笨重”。而Day.js作为 Moment.js 的轻量替代方案体积仅10KB左右压缩后API 与 Moment.js 高度兼容无需额外学习成本完美适配 Vue3 的开发场景。今天就带大家从零开始掌握 Day.js 在 Vue3 中的核心用法轻松搞定所有时间格式化需求新手也能快速上手官方文档 https://day.js.org/一、先搞懂为什么 Vue3 首选 Day.js在 Vue3 项目中选择 Day.js 而非其他时间工具核心优势有3点精准命中前端开发痛点轻量高效核心体积仅10KB远小于 Moment.js200KB不会增加项目打包体积尤其适合移动端和轻量项目API 友好完全兼容 Moment.js 的 API如果你用过 Moment.js几乎可以无缝切换无需重新记忆语法适配 Vue3支持 ES6 模块化导入可配合 Composition APIsetup 语法使用也能全局注册用法灵活且支持 TypeScript类型提示更友好。简单说Day.js 轻量版 Moment.js功能不减性能更优是 Vue3 时间处理的最优解之一。二、Vue3 中 Day.js 快速上手3步搞定下面我们从安装、全局注册、基础使用三个步骤快速搭建 Day.js 的开发环境全程复制代码即可使用。第一步安装 Day.js通过 npm 或 yarn 安装这是最常用的方式在项目根目录执行命令安装完成后即可在 Vue3 组件中按需导入使用也可以全局注册方便全项目调用。第二步全局注册推荐更高效在 Vue3 项目的入口文件main.js / main.ts中导入 Day.js 并挂载到 app 实例上实现全局可用无需在每个组件中重复导入。// main.jsVue3 JS import { createApp } from vue import App from ./App.vue import dayjs from dayjs // 导入 dayjs const app createApp(App) // 全局挂载 dayjs可通过 this.$dayjs选项式API或 app.config.globalProperties.$dayjs 访问 app.config.globalProperties.$dayjs dayjs app.mount(#app)如果是 Vue3 TypeScript 项目需要补充类型声明避免 TS 报错在 src 目录下创建 shims-vue.d.ts 文件添加如下代码// shims-vue.d.ts import type { App } from vue import dayjs from dayjs declare module vue/runtime-core { interface ComponentCustomProperties { $dayjs: typeof dayjs } }这样在 TS 组件中使用 this.$dayjs 时就能获得完整的类型提示了。第三步基础使用核心语法Day.js 的核心用法围绕「创建时间实例」和「格式化时间」展开下面结合 Vue3 的 Composition API 和选项式 API分别演示最常用的场景。1. 选项式 API 用法Vue2 迁移过来的同学首选template div !-- 格式化当前时间 -- p当前时间{{ formatCurrentTime }}/p !-- 格式化指定时间戳 -- p指定时间{{ formatTimestamp }}/p /div /template script export default { name: TimeFormat, computed: { formatCurrentTime() { // 格式化当前时间年-月-日 时:分:秒 return this.$dayjs().format(YYYY-MM-DD HH:mm:ss) }, formatTimestamp() { // 格式化指定时间戳13位毫秒级 const timestamp 1710000000000 return this.$dayjs(timestamp).format(YYYY年MM月DD日) } } } /script2. Composition API 用法Vue3 推荐写法在 setup 语法中无法直接使用 this因此需要两种方式要么局部导入 dayjs要么通过 getCurrentInstance 获取全局挂载的 dayjs。template div p当前时间{{ formatCurrentTime }}/p p相对时间{{ relativeTime }}/p /div /template script setup // 方式1局部导入推荐按需导入更符合 Composition API 理念 import dayjs from dayjs // 方式2获取全局挂载的 dayjs不推荐依赖全局配置 // import { getCurrentInstance } from vue // const { proxy } getCurrentInstance() // const dayjs proxy.$dayjs // 格式化当前时间 const formatCurrentTime dayjs().format(YYYY-MM-DD HH:mm:ss) // 相对时间如3分钟前、1天前 const relativeTime dayjs(2026-03-01).fromNow() // 假设当前时间是2026-03-05输出“4天前” /script三、Day.js 核心功能实战常用必掌握除了基础的时间格式化Day.js 还有很多实用功能覆盖开发中90%的时间处理场景下面重点讲解几个高频用法配合代码示例一看就会。1. 时间格式化最核心format() 方法是 Day.js 最常用的方法通过传入格式化字符串实现任意格式的时间展示常用占位符如下重点记这几个YYYY4位年份如2026MM2位月份如03、12DD2位日期如05、31HH24小时制如14、23mm2位分钟如08、59ss2位秒数如05、59实战示例// 1. 格式化当前时间 dayjs().format(YYYY-MM-DD HH:mm:ss) // 输出2026-03-05 14:30:00 dayjs().format(YYYY年MM月DD日 星期d) // 输出2026年03月05日 星期三星期d1周一7周日 // 2. 格式化指定时间支持字符串、时间戳、Date对象 dayjs(2026-03-05).format(MM/DD/YYYY) // 输出03/05/2026 dayjs(new Date()).format(HH:mm) // 输出14:30 dayjs(1710000000000).format(YYYY-MM-DD) // 输出2026-03-092. 相对时间高频场景fromNow() 方法可以快速展示“相对当前时间”的描述比如“刚刚”“3分钟前”“1个月前”非常适合展示评论时间、消息时间等场景无需手动计算差值。// 过去的时间 dayjs(2026-03-01).fromNow() // 输出4天前当前时间2026-03-05 dayjs(2026-03-05 14:00).fromNow() // 输出30分钟前当前时间14:30 // 未来的时间 dayjs(2026-03-10).fromNow() // 输出5天后注意fromNow() 默认不带“前/后”如果需要更精准的描述可以传入 true 参数dayjs(2026-03-01).fromNow(true) → 输出“4天”。3. 日期计算加减、差值开发中经常需要计算“n天后”“n小时前”的时间或者两个日期的差值Day.js 提供了 add()、subtract()、diff() 三个方法用法简单。// 1. 日期加减add 加subtract 减 dayjs().add(1, day).format(YYYY-MM-DD) // 明天 dayjs().subtract(7, day).format(YYYY-MM-DD) // 7天前 dayjs().add(3, hour).format(HH:mm) // 3小时后 dayjs().subtract(30, minute).format(HH:mm) // 30分钟前 // 2. 两个日期的差值diff() const start dayjs(2026-03-01) const end dayjs(2026-03-05) end.diff(start, day) // 输出4相差4天 end.diff(start, hour) // 输出96相差96小时4. 时间戳与日期转换接口返回的时间通常是时间戳13位毫秒级或10位秒级Day.js 可以快速实现时间戳与日期字符串的转换。// 1. 日期转时间戳毫秒级 dayjs(2026-03-05).valueOf() // 输出1710000000000示例值 dayjs().valueOf() // 当前时间的毫秒级时间戳 // 2. 时间戳转日期支持13位和10位 dayjs(1710000000000).format(YYYY-MM-DD) // 13位正常转换 dayjs(1710000000).format(YYYY-MM-DD) // 10位自动补全为毫秒级四、Vue3 中 Day.js 进阶技巧避坑优化掌握基础用法后这些进阶技巧能帮你避免踩坑提升开发效率尤其适合中大型项目。1. 全局配置默认格式化如果项目中大部分时间格式都是统一的比如“YYYY-MM-DD HH:mm:ss”可以全局配置默认格式无需每次都写 format() 的参数。// main.js 中全局配置 import dayjs from dayjs // 设置默认格式化格式 dayjs.defaultFormat YYYY-MM-DD HH:mm:ss // 之后使用时直接调用 format() 即可 dayjs().format() // 输出2026-03-05 14:30:002. 处理时区问题可选如果项目涉及多时区如海外项目Day.js 本身默认使用本地时区需要安装 timezone 插件来处理时区转换。//安装时区插件 npm install dayjs-plugin-timezone --save// 导入并使用插件 import dayjs from dayjs import timezone from dayjs-plugin-timezone dayjs.extend(timezone) // 转换为 UTC 时区 dayjs().tz(UTC).format() // 输出 UTC 时间 // 转换为纽约时区 dayjs().tz(America/New_York).format()3. 避坑指南新手必看时间戳必须是13位毫秒级如果接口返回10位秒级时间戳需先乘以1000否则会解析错误dayjs(1710000000 * 1000).format()避免直接修改 Day.js 实例Day.js 是 immutable 的每次调用 add()、subtract() 等方法都会返回一个新的实例不会修改原实例局部导入优于全局注册如果项目中只有少数组件需要用到 Day.js建议局部导入减少全局依赖提升项目性能。