如何利用 computed 实现类似微信的聊天时间格式化？实时逻辑处理-Vue.js-PHP中文网

vue 的 computed 实现微信时间格式化，核心是依赖数据变化自动更新而非定时器：今天显示“10:23”，昨天显示“昨天 15:42”，近7天显示“周一 14:05”，更早显示“2023/05/12”。

如何利用 computed 实现类似微信的聊天时间格式化？实时逻辑处理

用 Vue 的 computed 实现微信风格的聊天时间格式化，核心在于：**不依赖定时器轮询，而是靠数据变化自动触发更新，同时结合当前时间做相对判断**。关键不是“实时刷新”，而是“消息列表或当前时间变化时，自动重算显示文案”。

一、理解微信的时间显示逻辑

微信聊天列表/气泡中时间显示分层明显：

今天：只显示“10:23”、“昨天”：显示“昨天 15:42”
近7天（不含今天和昨天）：显示“周一 14:05”、“周三 09:18”
更早：显示“2023/05/12” 或 “2023.05.12”（取决于系统设置）

注意：这个逻辑是基于每条消息的 timestamp 和 当前系统时间 的相对关系计算得出，且不随秒级时间流逝动态改写——只有当你切换会话、收到新消息、或手动刷新页面时，才会重新计算。

二、computed 中实现无副作用的格式化函数

把格式化逻辑封装成纯函数，再在 computed 中调用。避免在 computed 里操作 DOM 或发请求，也不用 setInterval。

示例（Vue 3 Composition API）：

const now = ref(Date.now());
<p>// 模拟消息列表（含时间戳）
const messages = ref([
{ id: 1, content: '你好', timestamp: Date.now() - 30000 }, // 30秒前
{ id: 2, content: '在吗', timestamp: Date.now() - 86400000 }, // 昨天
{ id: 3, content: '明天见', timestamp: Date.now() - 3 * 86400000 } // 3天前
]);</p><p>// 格式化单条消息时间
const formatChatTime = (timestamp) => {
const date = new Date(timestamp);
const today = new Date(now.value);
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);</p><p>const diffDays = Math.floor((today - date) / (1000 <em> 60 </em> 60 * 24));</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1812" title="微信公众平台开发入门教程 中文WORD版"><img
														src="https://img.php.cn/upload/manual/000/000/013/170893440735990.png" alt="微信公众平台开发入门教程 中文WORD版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/shouce/1812" title="微信公众平台开发入门教程 中文WORD版" class="overflowclass">微信公众平台开发入门教程 中文WORD版</a>
													<p class="overflowclass">由于微信的大热，为了更好的方便使用微信的用户查询一些信息，这篇文章是入门级的微信公众平台开发教程，需要的朋友可以参考下  这篇入门教程将引导你完成如下任务： 创建百度云平台应用启用微信公众平台开发模式获取订阅、文字、图片、语音、视频消息回复文本、图文及音乐消息程序开发</p>
												</div>
												<a rel="nofollow" href="/xiazai/shouce/1812" title="微信公众平台开发入门教程 中文WORD版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p>if (diffDays === 0) {
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
if (diffDays === 1) {
return <code>昨天 ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</code>;
}
if (diffDays ${weekdays[date.getDay()]} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })};
}
return date.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' });
};</p><p>// computed 返回带格式化时间的消息列表
const formattedMessages = computed(() => {
return messages.value.map(msg => ({
...msg,
displayTime: formatChatTime(msg.timestamp)
}));
});
</p>

✅ 这样写，只要 messages 或 now 改变，formattedMessages 就自动更新，无需额外监听或刷新。

三、让“当前时间”可响应，但不高频更新

你不需要每秒更新 now——那反而浪费性能。只需在关键时机手动更新一次 now.value：

组件挂载时初始化：onMounted(() => { now.value = Date.now(); })
收到新消息时：now.value = Date.now()
用户切回页面（visibilitychange）：document.addEventListener('visibilitychange', () => { if (!document.hidden) now.value = Date.now(); })

这样既保证了时间基准最新，又避免了无意义的重计算。

四、进阶：支持 i18n 和本地化格式

微信会按系统语言/地区显示“昨天”“Monday”等。可以用 Intl.DateTimeFormat 替代 toLocaleString 做更可控的国际化：

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: '2-digit',
  minute: '2-digit',
  weekday: 'short',
  month: 'short',
  day: 'numeric'
});
// 然后根据 diffDays 选择不同 options 调用 formatter.format(date)

也可配合 vue-i18n 动态注入 locale，确保“昨天”翻译准确（比如中文是“昨天”，英文是 “Yesterday”）。

本质上，computed 在这里扮演的是“智能缓存+依赖追踪”的角色：它记住了哪些数据会影响时间文案，只在真正需要时才重跑逻辑，干净、高效、可预测。