vue-如何检查用户是否离线，并在用户恢复联机后立即显示div

目前，我正在使用定时循环中的一个函数来检查用户是否脱机：

created() {
   setInterval(() => {
        this.checkOnline();
   }, 30000);
}

方法：

checkOnline(){
   this.onLine = navigator.onLine ? true : false;
}

有没有一种不用计时器就能检测到这一点的方法？

另外，我试图显示一个1秒的警报，以告诉用户，他们已恢复在线。如果这个.online为true，应该隐藏div。当它为false时，它应该被隐藏，但是当它从false到true时，我想显示一下div，然后再隐藏它。我已经尝试过设置超时和使用watcher，但这两种方法都没有达到预期的效果。

我尝试过的方法：

data() {
     return {
         onLine: navigator.onLine ? true : false,
     }
 }

然后一个watcher来显示网上的信息：

watch: {
    onLine: function (val) {
        if(this.onLine === true){
            this.showBackOnline = true;
            setTimeout(()=>{ this.showBackOnline = false; }, 1000);
        }
    },
},

下面是自己在项目中用的方法：

//检测在线状态
      lineStatus () {
        if (navigator.onLine) {
          // console.log(true);
          //正常工作
          this.networkFlag = true
          this.networkStatus = ''
        } else {
          //执行离线状态时的任务
          this.networkFlag = false
          this.networkStatus = '网络已中断，正在离线编辑'
          // console.log(false);
        }
      },

除了使用专用的通知插件之外，还有比watcher更好的方法来实现这一点吗？我认为watcher是这里最合适的方法。

演示:https://jsfiddle.net/jacobgoh101/xz6e3705/4/

new Vue({
    el: "#app",
    data: {
        onLine: navigator.onLine,
        showBackOnline: false
    },
    methods: {
        updateOnlineStatus(e) {
            const {
                type
            } = e;
            this.onLine = type === 'online';
        }
    },
    watch: {
        onLine(v) {
            if (v) {
                this.showBackOnline = true;
                setTimeout(() => {
                    this.showBackOnline = false;
                }, 1000);
            }
        }
    },
    mounted() {
        window.addEventListener('online', this.updateOnlineStatus);
        window.addEventListener('offline', this.updateOnlineStatus);
    },
    beforeDestroy() {
        window.removeEventListener('online', this.updateOnlineStatus);
        window.removeEventListener('offline', this.updateOnlineStatus);
    }
})