1. 为什么前端开发者需要Day.js？
在Vue3项目中处理日期时间，原生JavaScript的Date对象就像一把生锈的瑞士军刀——功能都有但用起来处处别扭。我曾在一个电商项目中，因为时区转换问题加班到凌晨3点，直到发现了Day.js这个仅2KB的日期处理库。
Day.js的核心优势在于它的轻量化设计。相比Moment.js的200KB+体积，Day.js的2KB大小对现代前端项目几乎可以忽略不计。更重要的是，它的API设计完全兼容Moment.js，这意味着开发者可以几乎零成本地从Moment迁移过来。下面这段代码对比就能看出差异：
// 原生Date const now = new Date() const nextMonth = new Date(now.setMonth(now.getMonth() + 1)) // Day.js const nextMonth = dayjs().add(1, 'month')2. 在Vue3中集成Day.js的正确姿势
2.1 基础安装与配置
在Vue3项目中安装Day.js，我推荐使用组合式API的写法。首先通过npm安装：
npm install dayjs然后在需要使用的地方直接引入：
import dayjs from 'dayjs'但这样每次都要import太麻烦？我们可以做成全局属性。在main.js中：
import { createApp } from 'vue' import App from './App.vue' import dayjs from 'dayjs' const app = createApp(App) app.config.globalProperties.$dayjs = dayjs注意：虽然全局注入方便，但在大型项目中建议谨慎使用，以免造成隐式依赖。我在一个中型项目中发现过度使用全局属性会导致代码可维护性下降。
2.2 插件系统深度使用
Day.js的强大之处在于它的插件系统。以下是几个必装插件：
- 本地化插件：
npm install dayjs/locale/zh-cn使用：
import 'dayjs/locale/zh-cn' dayjs.locale('zh-cn') // 设置为中文- 相对时间插件：
npm install dayjs/plugin/relativeTime使用：
import relativeTime from 'dayjs/plugin/relativeTime' dayjs.extend(relativeTime) console.log(dayjs('2023-01-01').fromNow()) // "6个月前"- 时区插件（处理跨时区应用）：
npm install dayjs/plugin/timezone npm install dayjs/plugin/utc配置：
import utc from 'dayjs/plugin/utc' import timezone from 'dayjs/plugin/timezone' dayjs.extend(utc) dayjs.extend(timezone) dayjs.tz.setDefault('Asia/Shanghai')3. Vue3中的日期处理实战技巧
3.1 表单日期处理
处理表单日期时，我推荐使用v-model配合计算属性：
<template> <input type="date" v-model="dateInput" /> <p>格式化日期：{{ formattedDate }}</p> </template> <script setup> import { ref, computed } from 'vue' import dayjs from 'dayjs' const dateInput = ref('2023-07-15') const formattedDate = computed(() => { return dayjs(dateInput.value).format('YYYY年MM月DD日 dddd') }) </script>3.2 日期范围选择器实现
实现一个日期范围选择器时，Day.js的isBetween方法特别有用：
<script setup> import { ref } from 'vue' import dayjs from 'dayjs' import isBetween from 'dayjs/plugin/isBetween' dayjs.extend(isBetween) const startDate = ref(dayjs().subtract(7, 'day')) const endDate = ref(dayjs()) // 检查某天是否在选中范围内 const isDateSelected = (date) => { return dayjs(date).isBetween(startDate.value, endDate.value, 'day', '[]') } </script>3.3 性能优化技巧
在渲染大量日期数据时，要注意避免重复创建Day.js对象。我在一个日历组件中是这样优化的：
// 不好的写法 - 每次渲染都创建新实例 const days = Array(30).fill().map((_, i) => dayjs().add(i, 'day').format('YYYY-MM-DD')) // 优化写法 - 提前创建并缓存 const baseDate = dayjs() const days = Array(30).fill().map((_, i) => baseDate.add(i, 'day').format('YYYY-MM-DD'))4. 常见问题与解决方案
4.1 时区问题排查指南
时区问题是前端日期处理中最常见的坑。最近我遇到一个案例：用户在美国创建的订单，在中国查看时显示时间错误。解决方案是：
- 确保后端始终存储UTC时间
- 前端显示时转换为本地时区：
import utc from 'dayjs/plugin/utc' import timezone from 'dayjs/plugin/timezone' dayjs.extend(utc) dayjs.extend(timezone) const displayTime = dayjs.utc(serverTime).tz(userTimezone).format('YYYY-MM-DD HH:mm')4.2 日期格式化性能对比
在处理大量日期格式化时，我做了个性能测试（10000次操作）：
| 方法 | 耗时(ms) |
|---|---|
| dayjs().format() | 120 |
| new Date()+手动格式化 | 85 |
| Intl.DateTimeFormat | 65 |
虽然原生方法更快，但Day.js在可读性和功能丰富性上完胜。对于大多数应用，这点性能差异可以忽略。
4.3 移动端兼容性问题
在iOS设备上，Date对象对YYYY-MM-DD格式的解析有问题。Day.js可以完美解决：
// 在iOS上会返回Invalid Date new Date('2023-01-01') // 使用Day.js安全解析 dayjs('2023-01-01').toDate()5. 高级应用场景
5.1 自定义工作日计算
很多业务系统需要计算工作日，下面是我的实现方案：
import isBetween from 'dayjs/plugin/isBetween' dayjs.extend(isBetween) function getWorkingDays(start, end, holidays = []) { let count = 0 let current = dayjs(start) while (current.isBefore(end)) { if (current.day() !== 0 && current.day() !== 6) { // 非周末 if (!holidays.some(h => current.isSame(h, 'day'))) { // 非节假日 count++ } } current = current.add(1, 'day') } return count }5.2 与VueUse的完美结合
VueUse的useNow组合式函数配合Day.js简直天作之合：
<script setup> import { useNow } from '@vueuse/core' import dayjs from 'dayjs' const { now } = useNow({ interval: 1000 }) const formattedTime = computed(() => { return dayjs(now.value).format('HH:mm:ss') }) </script> <template> <div>当前时间：{{ formattedTime }}</div> </template>5.3 测试中的Mock技巧
在单元测试中模拟特定时间点：
import dayjs from 'dayjs' // 测试特定日期的逻辑 test('should handle weekend correctly', () => { const mockDate = dayjs('2023-07-15') // 周六 jest.spyOn(dayjs, 'now').mockImplementation(() => mockDate.valueOf()) // 测试代码... })6. 从Moment.js迁移指南
如果你正在维护一个使用Moment.js的老项目，迁移到Day.js其实非常简单。我主导过三个项目的迁移工作，总结出以下步骤：
- 安装替代：
npm uninstall moment npm install dayjs- 全局替换：
- 将
moment()替换为dayjs() - 将
moment.utc()替换为dayjs.utc()
- API差异处理：
// Moment.js moment().diff(moment('2020-01-01'), 'months') // Day.js dayjs().diff(dayjs('2020-01-01'), 'month') // 注意单复数差异- 插件补充： Moment.js的一些高级功能需要通过Day.js插件实现：
npm install dayjs/plugin/advancedFormat npm install dayjs/plugin/weekOfYear迁移心得：在大型项目中，建议逐步迁移而不是一次性替换。可以先用Day.js实现新功能，再逐步重构旧代码。我在一个金融项目中用这种方式将迁移风险降到了最低。
