我尝试使用计算来观看 navigator.onLine 但在刷新网页之前无法工作？

Question

我尝试使用计算来观看 navigator.onLine 但在刷新网页之前无法工作？

<template><div>{{isOnline}}</div></template>
...
<scirpt>
...
  computed: {
    isOnline() {
      return navigator.onLine;
    },
  },
...
</script>

Answer 1

浏览器 API 不是响应式的。因此，每当它们的值发生变化时，Vue 都不知道。

要监听navigator.onLine更改，您必须使用浏览器触发的本机事件（请参阅文档）：

data () {
  return {
    online: false,
  }
},
methods: {
  onOffline () { this.online = false },
  onOnline () { this.online = true },
  created() {
    window.addEventListener('offline', this.onOffline)
    window.addEventListener('online', this.onOnline)
  },
  destroyed() {
    window.removeEventListener('offline', this.onOffline)
    window.removeEventListener('online', this.onOnline)
  }
}

注意：小心 SSR，window服务器上不存在。