vue3 dayjs

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 的轻量级特性和插件机制，可以满足各种复杂的日期需求。这种技术栈的结合特别适合需要频繁处理日期的应用场景，如日历、时间安排、数据分析等。无论项目大小，这种方式都能让代码保持可读性和可维护性。