Component中时间戳的用法示例

# Component中时间戳的用法示例

时间戳（Timestamp）在组件开发中是处理时间数据的核心工具，尤其在需要记录事件、排序或计算时间间隔的场景中。本文将通过代码示例展示时间戳的常见用法。

---

## 1. 获取当前时间戳

```javascript
// 方法1：Date对象
const timestamp1 = new Date().getTime(); // 毫秒级时间戳

// 方法2：性能更高
const timestamp2 = Date.now(); 

2. 时间戳格式化

通过toLocaleString或第三方库（如dayjs）转换为可读格式：

// 原生API格式化
const formattedTime = new Date(timestamp1).toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
// 输出示例：2023/08/15

// 使用dayjs
import dayjs from 'dayjs';
console.log(dayjs(timestamp1).format('YYYY-MM-DD HH:mm:ss'));

3. 计算时间差

const start = Date.now();
// 模拟耗时操作
setTimeout(() => {
  const duration = Date.now() - start;
  console.log(`耗时：${duration}ms`);
}, 1000);

4. React/Vue组件中的实践

React示例：显示相对时间

function TimeDisplay({ timestamp }) {
  const [time, setTime] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(dayjs(timestamp).fromNow()); // "3分钟前"
    }, 60000);
    return () => clearInterval(interval);
  }, [timestamp]);

  return <span>{time}</span>;
}

Vue示例：过滤器格式化

// 全局过滤器
Vue.filter('formatTime', value => {
  return dayjs(value).format('MM-DD');
});

// 模板中使用
<template>
  <div>{{ timestamp | formatTime }}</div>
</template>

注意事项

1. 时区问题：建议使用UTC时间或明确时区
2. 性能：高频更新时考虑节流
3. 存储：数据库通常使用13位毫秒级时间戳

通过合理运用时间戳，可以高效解决组件中的时间处理需求。 “`

（全文约450字）