Vue 3 是一个渐进式的 JavaScript 框架，用于构建用户界面。与 Vue 2 相比，Vue 3 带来了诸多新特性和改进，如组合式 API、更好的性能、改进的 TypeScript 支持等。而 Day.js 是一个轻量级的 JavaScript 库，旨在简洁而有效地处理日期和时间。结合 Vue 3 和 Day.js，你可以创建功能强大的应用程序，尤其是在需要处理日期和时间时。

使用 Vue 3 的组合式 API

Vue 3 中引入的组合式 API 是一个显著的改进，它允许开发者更加灵活和直观地组织组件内的逻辑。通过 setup 函数，你可以在一个地方集中处理与组件相关的状态、计算属性、方法和侦听器。这对于大型应用或者复杂组件来说，增强了代码的可读性和可维护性。

例如，创建一个简单的日期选择器组件，可以通过组合式 API 将 Day.js 集成到 Vue 3 中：

<template> <div> <input type="date" v-model="selectedDate" @change="updateFormattedDate" /> <p>Formatted Date: {{ formattedDate }}</p> </div> </template> <script> import { ref } from vue; import dayjs from dayjs; export default { setup() { const selectedDate = ref(); const formattedDate = ref(); function updateFormattedDate() { formattedDate.value = dayjs(selectedDate.value).format(MMMM D, YYYY); } return { selectedDate, formattedDate, updateFormattedDate }; } }; </script>

在上面的代码中，我们定义了一个简单的日期选择器组件，允许用户通过输入文字选择日期，并使用 Day.js 格式化日期。通过组合式 API，我们可以将所有相关逻辑放在一个 setup 函数中。

Day.js 的特点和使用

Day.js 是一个现代的日期处理库，其主要优势在于体积小巧（只有 2kB 左右），但功能强大，语法类似于 moment.js，因此对于已经熟悉 moment.js 的开发者来说，Day.js 的学习曲线几乎为零。Day.js 提供了一系列插件来扩展其功能，比如本地化、相对时间、时区支持等。

基本用法

Day.js 的基本用法非常直观。下面是一些常用的日期操作：

const now = dayjs(); console.log(now.format(YYYY-MM-DD)); // 当前日期 console.log(now.add(1, year).format(YYYY-MM-DD)); // 一年后的日期 console.log(now.subtract(1, month).format(YYYY-MM-DD)); // 一个月前的日期 console.log(now.isBefore(dayjs(2025-01-01))); // 判断是否在特定日期之前 console.log(now.day()); // 获取当前星期几 使用插件

Day.js 的插件机制使其非常灵活。在需要时，可以选择性地引入插件来增强功能。例如，假如你想启用本地化功能，可以使用 localizedFormat 插件：

import localizedFormat from dayjs/plugin/localizedFormat; import dayjs/locale/zh-cn; dayjs.extend(localizedFormat); const now = dayjs().locale(zh-cn); console.log(now.format(LL)); // 输出格式化后的本地化日期，比如 "2023年10月15日"

这个插件对格式化字符串进行了扩展，使其能够更好地适应不同语言和地区的格式。

在 Vue 3 项目中集成 Day.js

为了在 Vue 3 项目中使用 Day.js，你可以选择几种不同的方式来集成它。小型项目中，不妨直接在需要的组件中导入 Day.js。而在大型项目中，*将 Day.js 封装为一个自定义插件或服务，以便于在各个组件中重用。

简单组件集成

在单个组件中，直接使用 Day.js 处理日期逻辑，这种方式最为简单：

<template> <div>{{ formattedToday }}</div> </template> <script> import { ref, onMounted } from vue; import dayjs from dayjs; export default { setup() { const formattedToday = ref(); onMounted(() => { formattedToday.value = dayjs().format(YYYY-MM-DD); }); return { formattedToday }; } }; </script> 全局插件化集成

在更大的项目中，将 Day.js 封装为一个 Vue 插件可能更加合适。这样可以在全局范围内配置 Day.js，方便使用。例如，我们可以创建一个插件文件 dayjs-plugin.js：

import dayjs from dayjs; import relativeTime from dayjs/plugin/relativeTime; import localizedFormat from dayjs/plugin/localizedFormat; import dayjs/locale/zh-cn; dayjs.extend(relativeTime); dayjs.extend(localizedFormat); dayjs.locale(zh-cn); export default { install(app) { app.config.globalProperties.$dayjs = dayjs; } };

在主入口文件中引入此插件：

import { createApp } from vue; import App from ./App.vue; import DayjsPlugin from ./dayjs-plugin; const app = createApp(App); app.use(DayjsPlugin); app.mount(#app);

如此一来，在任何组件中都能够通过 this.$dayjs 访问 Day.js 实例：

<template> <div>{{ relativeDate }}</div> </template> <script> export default { data() { return { pastDate: 2022-10-15 }; }, computed: { relativeDate() { return this.$dayjs(this.pastDate).fromNow(); } } }; </script>

总结

Vue 3 与 Day.js 的结合提供了一种高效、简洁的方式来处理前端应用中的日期和时间问题。借助 Vue 3 的组合式 API，开发者能够更加清晰地组织和管理与日期相关的逻辑，同时利用 Day.js 的轻量级特性和插件机制，可以满足各种复杂的日期需求。这种技术栈的结合特别适合需要频繁处理日期的应用场景，如日历、时间安排、数据分析等。无论项目大小，这种方式都能让代码保持可读性和可维护性。