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字）