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、定时器监听或后端主动推送等机制。掌握这几种方式,可以轻松构建需要实时数据同步的应用