前言

在繁忙的前端开发中，日期格式化似乎是一个司空见惯的需求。无论是为了在页面上展示时间戳，还是为了让用户以自己习惯的方式查看日期，亦或是为了处理国际化时间显示，我们都需要一个既简单又灵活的日期格式化工具。今天，就让我们一起深入探索VueUse中的useDateFormat，揭开它的源码神秘面纱，并通过实际案例展示其强大的应用魅力。

一、useDateFormat简介

useDateFormat是VueUse团队专为Vue 3打造的一款响应式日期格式化工具。它基于JavaScript的Intl.DateTimeFormat API，不仅支持灵活的格式化选项，还能轻松应对国际化需求。

基本用法：

import { useDateFormat } from '@vueuse/core';

const date = new Date();
const formatted = useDateFormat(date, 'YYYY-MM-DD HH:mm:ss');
console.log(formatted.value); // 输出类似 "2025-04-02 14:30:00"

二、源码解读

接下来，让我们一起看看useDateFormat的源码是如何实现的。

输入处理：

const dateRef = isRef(date) ? date : ref(date);

这里，我们首先检查输入的date是否已经是一个ref对象。如果是，就直接使用它；如果不是，就将其包装为一个ref对象。

格式化逻辑：

const formatter = (value, fmt) => {
  // ...
};

如果fmt是一个自定义字符串，比如YYYY-MM-DD，那么就会调用formatCustom函数进行替换。否则，就会使用Intl.DateTimeFormat进行格式化。

自定义格式化：

const formatCustom = (date, fmt) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return fmt
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
    .replace('HH', hours)
    .replace('mm', minutes)
    .replace('ss', seconds);
};

通过getFullYear、getMonth等方法提取日期组件，并使用padStart方法补齐两位数。

响应式支持：

const output = computed(() => formatter(dateRef.value, format));
return output;

使用computed函数确保当dateRef或format变化时，输出自动更新。

三、使用示例

下面是一个实际的Vue组件示例，展示如何使用useDateFormat实现动态日期格式化：

<template>
  <div>
    <p>当前时间：{{ formattedDate }}</p>
    <input v-model="format" placeholder="输入格式，如 YYYY-MM-DD HH:mm:ss" />
    <button @click="updateDate">刷新时间</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useDateFormat } from '@vueuse/core';

  const date = ref(new Date());
  const format = ref('YYYY-MM-DD HH:mm:ss');

  const formattedDate = useDateFormat(date, format);

  const updateDate = () => {
    date.value = new Date(); // 更新日期，触发重新格式化
  };
</script>

<style scoped>
  input {
    margin: 10px;
    padding: 5px;
  }
  button {
    padding: 5px 10px;
  }
</style>

在这个示例中，我们显示了当前时间的格式化结果。用户可以输入自定义格式，并实时更新显示。点击“刷新时间”按钮会更新日期。

四、国际化支持

通过locales参数，我们可以轻松实现不同语言环境下的日期格式化：

const formatted = useDateFormat(new Date(), 'YYYY-MM-DD', { locales: 'zh-CN' });
console.log(formatted.value); // 输出类似 "2025-04-02"

此外，我们还可以直接使用Intl.DateTimeFormat的标准选项：

const formatted = useDateFormat(new Date(), '', { locales: 'en-US', dateStyle: 'full' });
console.log(formatted.value); // 输出类似 "Wednesday, April 2, 2025"

五、动态切换格式

将format定义为响应式变量，我们可以实现动态切换日期格式：

const format = ref('YYYY-MM-DD');
const formatted = useDateFormat(new Date(), format);
format.value = 'HH:mm:ss'; // 切换为时间格式

六、错误处理

如果传入无效的日期，useDateFormat会返回空字符串：

const formatted = useDateFormat('invalid-date', 'YYYY-MM-DD');
console.log(formatted.value); // 输出 ""

七、与其他工具的对比

与传统日期格式化库（如moment.js或day.js）相比，useDateFormat具有以下优势：

• 轻量：无需引入额外依赖，直接基于原生API。
• 响应式：与Vue的响应式系统无缝集成。
• 灵活性：支持自定义格式和国际化。

然而，它也有局限性，例如不支持过于复杂的格式化规则（如moment.js的fromNow功能），适合轻量级场景。

八、总结

总的来说，useDateFormat是VueUse中一个简单而实用的工具。通过结合自定义格式化和Intl.DateTimeFormat，它为开发者提供了灵活的日期格式化能力。本文的源码分析和示例展示了它的核心原理和应用场景，希望能帮助你在项目中更高效地处理日期相关需求。