在日常开发中，实时显示在线人数是一个很常见的需求，比如聊天室或多人协作平台。借助Vue.js强大的响应式特性与定时器功能，我们可以轻松实现这一功能！💪

首先，在Vue实例中定义一个`onlineCount`变量来存储当前在线人数，并通过`setInterval()`设置一个定时器，每隔两分钟向后端发起请求以获取最新的在线人数。例如：

```javascript

data() {

return {

onlineCount: 0,

};

},

mounted() {

setInterval(() => {

fetch('/api/online-count')

.then(response => response.json())

.then(data => (this.onlineCount = data.count));

}, 120000); // 每隔两分钟执行一次

}

```

此外，为了优化用户体验，还可以加入加载动画或提示信息，让用户知道数据正在刷新。⏳

通过这种方式，不仅提升了页面的动态交互性，还减少了频繁请求带来的性能压力。快去试试吧！🚀

前端开发 VueJS 实时更新