1. 使用 sockets 与服务器建立实时通信,接收数据变化推送在 created 生命周期中建立 sockets 连接:
js
created() {
this.socket = io('someUrl')
this.socket.on('dataChange', () => {
axios.get('/someApi').then(res => {
this.data = res.data
})
})
}
服务器端通过 socket.emit('dataChange')推送数据变化消息,前端接收到后立即发起请求获取最新数据。
2. 使用定时器或 watch 监听定期拉取数据
js
created() {
this.timer = setInterval(() => {
axios.get('/someApi').then(res => {
if (res.data !== this.data) { // 数据有变化
this.data = res.data
}
})
}, 5000) // 5 秒定时拉取
}
或者
js
watch: {
data: {
immediate: true, // 初始化立即执行
handler(newVal) {
setTimeout(() => { // 使用定时器,避免频繁请求
axios.get('/someApi').then(res => {
if (res.data !== newVal) {
this.data = res.data
}
})
}, 5000)
}
}
}
通过以上两种方式,我们可以定期主动向接口查询最新数据,判断是否发生变化,变化则更新。
3. 后端主动 push 数据变更消息除了前端定期主动拉取,我们也可以在后端数据更新后,主动通过 webhooks 或 sockets 将数据变更消息 push 给前端,前端接收到消息后发起请求获取最新数据。
这些是实现 Vue 接口数据实时更新的常用方案,你可以根据自己的场景选择使用 sockets、定时器监听或后端主动推送等机制。掌握这几种方式,可以轻松构建需要实时数据同步的应用