date-fns使用详解

date-fns 是一个现代的 JavaScript 日期工具库，提供了丰富的函数来格式化、解析、计算和操作日期，类似于 moment.js 但更轻量、模块化（支持按需导入）。其核心优势是函数式设计、不可变性和对原生 Date 对象的直接操作，同时支持 Tree-shaking（打包时自动剔除未使用的代码）。

---

在 Vue 中使用 date-fns 的步骤

1. 安装

通过 npm 或 yarn 安装依赖：

<BASH>

npm install date-fns
# 或
yarn add date-fns

2. 按需导入函数

在 Vue 组件中直接导入需要用到的函数（推荐按需导入）：

<JAVASCRIPT>

import { format, parseISO, addDays, differenceInDays } from 'date-fns';

3. 在 Vue 组件中使用

在方法、计算属性或模板中直接调用函数。以下是几个常见场景：

示例 1：格式化日期

<VUE>

<template>
  <div>
    <!-- 显示格式化后的日期 -->
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
import { format } from 'date-fns';

export default {
  data() {
    return {
      currentDate: new Date(),
    };
  },
  computed: {
    formattedDate() {
      return format(this.currentDate, 'yyyy-MM-dd HH:mm:ss');
    },
  },
};
</script>

示例 2：处理日期计算（如添加天数）

<JAVASCRIPT>

methods: {
  getFutureDate(days) {
    return addDays(new Date(), days);
  }
}

示例 3：在模板中直接使用（需注意逻辑简洁）

<VUE>

<template>
  <p>Next Week: {{ format(addDays(new Date(), 7), 'yyyy-MM-dd') }}</p>
</template>

<script>
import { format, addDays } from 'date-fns';

export default {
  methods: {
    format,
    addDays,
  },
};
</script>

---

高级用法：结合 Vue 3 Composition API

在 Vue 3 的 setup() 或 <script setup> 中：

<VUE>

<template>
  <p>Formatted: {{ formattedDate }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';
import { format } from 'date-fns';

const currentDate = ref(new Date());
const formattedDate = computed(() => format(currentDate.value, 'yyyy-MM-dd'));
</script>

---

注意事项

1. 时区问题
   date-fns 默认使用本地时区，若需处理时区，需搭配 date-fns-tz 扩展库：

   <BASH>

   npm install date-fns-tz

2. Tree-Shaking 优化
   确保构建工具（如 Webpack/Vite）支持 ES Modules，避免全量导入。
3. 常见函数参考
   • 格式化日期：format(date, 'yyyy-MM-dd')
   • 解析字符串：parseISO('2023-10-01')
   • 计算差值：differenceInDays(endDate, startDate)
   • 日期操作：addDays(date, 7) / subMonths(date, 1)

---

总结

date-fns 通过函数化、模块化的设计，能高效完成日期处理需求。在 Vue 中结合响应式数据（如 ref、computed），可以便捷地实现动态日期展示和计算。