vue2/vue3 Composition Api 常用工具集， @vueuse/core 之核心函数 time 实践

useDateFormat

格式化日期格式

格式入参，使用方法类似 dayjs

格式	输出信息	描述
YY	18	两位数年份
YYYY	2018 年	四位数的年份
M	1-12	这个月，从1点开始
MM	01-12	月份，2位数
MMM	1月-12月	缩写的月份名称
MMMM	1月-12月	完整的月份名称
D	1-31	每月的哪一天
DD	01-31	月份的哪一天，2位数
H	0-23	小时
HH	00-23	小时，2位数
h	1-12	小时，12小时时钟
hh	01-12	小时，12小时时钟，2位数
m	0-59	一分钟
mm	00-59	分钟，2位数
s	0-59	第二个
ss	00-59	第二个，2位数
SSS	000-999	毫秒，3位数
A	上午下午	merridiem
AA	上午下午	经络，周期
a	下午上午	meridiem，小写
aa	上午下午	经文、小写和句号
d	0-6	一周中的某一天，周日为0
dd	S-S	一周中哪一天的最小名称
ddd	周日-周六	一周中哪一天的短名称
dddd	周日至周六	一周中的一天的名称

<script lang="ts" setup>
import { ref } from 'vue'
import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
const formatted2 = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locale: 'zh-CN' })
</script>

<template>
  <div class="use-date-format">
    <p>{{ formatted }}</p>
    <p>{{ formatted2 }}</p>
  </div>
</template>

输出格式如下：

2023-08-27 17:48:40

2023-08-27 (周日)

useTimeAgo

响应式时间计算，过去了多长时间，经典使用场景，购物应用，评论过去了多长时间

<script lang="ts" setup>
import { useTimeAgo, formatTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2022, 11, 11))
const timeAgo2 = formatTimeAgo(new Date(2022, 11, 11))
</script>

<template>
  <div class="use-time-ago">
    {{ timeAgo }}<br />
    <h3>非响应式</h3>
    {{ timeAgo2 }}
  </div>
</template>