vue知识点之监听"切换标签页触发事件"、"浏览器关闭(或者刷新)事件"

描述

1. 监听tab切换浏览器页面，在离开当前页面和再次进来发生事件监听

2. 监听tab关闭(或者刷新)浏览器页面，在离开或者刷新前发生事件监听

解决

<script>
    export default {
        name: 'App',
        mounted() {
            /*1.浏览器标签页切换会触发"visibilitychange"事件*/
            document.addEventListener("visibilitychange", this.handleTagChanged)
            /*2.浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"beforeunload"事件*/
            window.addEventListener('beforeunload', this.handleTagClosed)
        },
        destroyed() {
            /*1.remove掉上面对应的"visibilitychange"事件监听*/
            document.removeEventListener("visibilitychange",this.handleTagChanged)
            /*2.remove掉上面对应的"beforeunload"事件监听*/
            window.removeEventListener('beforeunload', this.handleTagClosed)
        },
        methods: {
            handleTagChanged(){
                // 切换隐藏标签
                if (document.visibilityState === "hidden") {
                    this.handleFn()
                }
                // 切换显示标签
                if (document.visibilityState === "visible") {
                    
                }
            },
            handleTagClosed(){
                this.handleFn()
            },
            handleFn() {
                /*处理逻辑*/
                //1、如果要发送请求，那么最好用navigator.sendBeancon(url)，它可以保证在浏览器页面销毁前，将请求发送出去。如果使用XMLHttprequest或者基于它实现的axios发送请求，那么可能出现浏览器关闭了，但是请求没有发送出去的情况。
                //2、如果单纯监听切换浏览器标签页、单纯监听刷新页面，那么可以使用axios发送请求
                //3、navigator.sendBeancon(url)默认发送POST请求
                //4、举例如下：
                const URL = process.env.VUE_APP_BASE_API + "/uploads/deleteAll"
                navigator.sendBeacon(URL)
            },
        }
    }
</script>

注意

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除

⏰ 错误示例：

document.body.addEventListener('touchmove', function (event) {
　　event.preventDefault();
},false);

document.body.removeEventListener('touchmove', function (event) {
　　event.preventDefault();
},false);

这个例子中，使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同

⏰ 正确示例：

function bodyScroll(event) {
　　event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);

重写后的这个例子在addEventListener()和removeEventListener()中用的是相同的函数。