vue3时间格式化

今天面试，面试官问我时间格式化，最近脑袋有点发懵加上两个月没碰vue框架，回答的乱七八糟，所以回来后面整理了一下，希望以后能够将这个东西记在脑子里面。

时间格式化：目前我了解到的有三种方法，一是dayjs，二是date-fns，三是原生js；前两个需要安装库，当然用起来很方便，后者不需要安装库。

三种方法对比：

方法	优点	缺点	推荐场景
使用 date-fns	功能强大、模块化（按需引入）、API 直观、体积较小	需安装第三方库	大多数项目，特别是需要复杂日期操作或国际化时
使用 Day.js	功能丰富、API 设计优雅（链式调用）、体积非常小（仅约2KB）	需安装第三方库	大多数项目，特别是注重包大小和开发体验时
使用原生 Date	无需安装额外依赖、浏览器原生支持	代码相对繁琐、需手动处理月份（0-11）、时区等问题	极其简单的日期显示，且严格控制包大小的项目

方法一：使用 Day.js（推荐）

安装依赖：npm install dayjs （组件引用或者全局引用都可以）

Day.js 常用格式化格式

格式代码	含义	示例
YYYY	四位数的年份	2025
MM	两位数的月份	09
M	一位数的月份	9
DD	两位数的日期	15
D	一位数的日期	15
HH	24小时制的小时	14
hh	12小时制的小时	02
mm	分钟	05
ss	秒	09
A	上午/下午大写	AM / PM
a	上午/下午小写	am / pm

组件内使用

<template>
  <div>
    <p>当前时间：{{ formatDate(currentTime) }}</p>
  </div>
</template>
<script setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
const currentTime = ref(new Date());

//----------------------------------方法一：dayjs----------------------------------
 const formatDate = (date) => {
   console.log(date)
   const first=dayjs(date).format('YYYY-MM-DD')
   const second=dayjs(date).format('YYYY-MM-DD HH:mm:ss')
   return `${first} ${second}`
 }
</script>

<style scoped></style>

方法二： 使用 date-fns

安装依赖：npm install date-fns

代码示例：

<template>
  <div>
    <p>当前时间：{{ formatDate(currentTime) }}</p>
  </div>
</template>
<script setup>

import { ref } from 'vue';
import { format } from 'date-fns';
const currentTime = ref(new Date());

//----------------------------------方法二：date-fns----------------------------------
 const formatDate = (date) => {
   console.log(date)
   const first=format(date,'yyyy-MM-dd')
   const second=format(date,'yyyy-MM-dd HH:mm:ss')
   return `${first} ${second}`
 }
</script>

<style scoped></style>

方法三： 原生 JavaScript Date 对象

代码示例：

<template>
  <div>
    <p>当前时间：{{ formatDate(currentTime) }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const currentTime = ref(new Date());
//----------------------------------方法三：原生js----------------------------------
const formatDate = (date) => {
  console.log(date);
  //padZero为了保证最小位数是两位，也就是补充0
  const padZero = (num) => num.toString().padStart(2, '0');
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1);
  const day = padZero(date.getDate());
  const hour = padZero(date.getHours());
  const minute = padZero(date.getMinutes());
  const second = padZero(date.getSeconds());
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
</script>

<style scoped></style>