VUE2 监听页面刷新和关闭事件

最近想完成一个关闭设备设备页面就释放设备的需求，但是需要首先知道页面是否关闭，再执行一个请求操作，目前最新版chrome对于页面关闭刷新等的权限限制了很多，找了好久找到合适的方法

在vue中的mounted中添加如下方法

mounted: function () {
    let _beforeUnload_time = 0, _unload_time = 0
    // 窗口关闭或刷新时候的操作
    window.addEventListener('beforeunload', (event) => {
        _beforeUnload_time = new Date().getTime()
        {#// Cancel the event as stated by the standard.#}
        {#event.preventDefault();#}
        {#// Chrome requires returnValue to be set.#}
        {#event.returnValue = '';#}
    });

    window.addEventListener('unload', (event) => {
        _unload_time = new Date().getTime()
        console.log(_unload_time - _beforeUnload_time)
        // 关闭页面通常小于100毫秒
        if (_unload_time - _beforeUnload_time <= 100) {
            //业务代码
            this.stopUsing()
        }
    })}

然后在对应的业务代码地方用自己的函数即可，原理是刷新页面与关闭页面时两个事件的事件间隔不一样，关闭页面通常小于100ms，另外需注意上方有四行注释的代码，如果不注释，就会在关闭和刷新的时候提醒用户是否关闭，而用户的选择时间也会算进去，影响我们两个事件的事件间隔判断，因此注释掉。

原理如下

页面加载时只执行onload
页面关闭时先执行onbeforeunload，最后onunload
页面刷新时先执行onbeforeunload，然后onunload，最后onload。