当前位置：首页 > article >正文

Vue 中的日期格式化实践：从原生 Date 到可视化展示！！！

article 2025/3/25 6:40:51

📅 Vue 中的日期格式化实践：从原生 Date 到可视化展示 🚀

在数据可视化场景中，日期时间的格式化显示是一个高频需求。本文将以一个邀请码关系树组件为例，深入解析 Vue 中日期格式化的 核心方法、性能优化 和 最佳实践，并配合 Mermaid 流程图 直观展示处理流程！

一、🛠️ 核心方法：原生 Date 对象处理

代码实现

private formatDate(dateString: string | null): string {
  if (!dateString) return '-'
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

🔍 关键解析

二、🚀 性能优化策略

1. 避免重复计算

在树形数据渲染中，每个节点都会调用 formatDate。对于大型数据集：

2. 缓存格式化结果

private dateCache = new Map<string, string>()

private formatDate(dateString: string) {
  if (this.dateCache.has(dateString)) {
    return this.dateCache.get(dateString)!
  }
  // ...计算逻辑
  this.dateCache.set(dateString, formattedDate)
  return formattedDate
}

三、🌐 时区处理陷阱与解决方案

四、🆚 替代方案对比

方法	👍 优点	👎 缺点
原生 Date + 拼接	🚫 零依赖、轻量级	📏 代码冗长、时区处理难
date-fns	🧩 函数式 API、Tree-shaking 支持	📦 需安装依赖
moment.js	💪 功能强大、时区支持完善	🐢 包体积较大（已弃用）
Intl.DateTimeFormat	🌍 浏览器原生支持、国际化友好	⚙️ 配置项复杂