解析Vuejs使用addEventListener的事件触发执行函数的this问题

let n = 0;
let max = 3; //   切屏最大次数
document.addEventListener("visibilitychange", function () {
    if(document.visibilityState == 'hidden'){
        n++;
    } else if(document.visibilityState == 'visible') {
        if (n > max) {
            this.$alert('你已经切换离开考试页面超过'+max+"次系统将自动提交答卷！", '警告', {
                confirmButtonText: '知道了',
                callback: action => {
                    this.msgSuccess("系统自动提交答卷！");
                }
            });
            return;
        }
        this.$alert('你已经切换离开考试页面'+n+'次，如果超过'+max+"次系统会自动提交答卷，请认真作答！", '警告', {
            confirmButtonText: '知道了',
            callback: action => {}
        });
    }
});

let n = 0;
let max = 3; //   切屏最大次数
let fn = function () {
    console.log("this===",this);
    if(document.visibilityState == 'hidden'){
        n++;
    } else if(document.visibilityState == 'visible') {
        if (n > max) {
            this.$alert('你已经切换离开考试页面超过'+max+"次系统将自动提交答卷！", '警告', {
                confirmButtonText: '知道了',
                callback: action => {
                    this.msgSuccess("系统自动提交答卷！");
                }
            });
            return;
        }
        this.$alert('你已经切换离开考试页面'+n+'次，如果超过'+max+"次系统会自动提交答卷，请认真作答！", '警告', {
            confirmButtonText: '知道了',
            callback: action => {}
        });
    }
}
// 使用bind绑定的事件才是指向函数，否则指向的是调用addEventListener的对象
document.addEventListener("visibilitychange", fn.bind(this));

// vue 添加监听事件，addEventListener第二个参数要绑在this上，即需要在methods中声明，否则销毁的时候会报错
// 在mounted中监听，在beforeDestroy中销毁，绑定的事件在methods中声明
mounted() {
    // 监听
    window.addEventListener('resize', this.handleEventListener)
  },
beforeDestroy() {
  // 销毁
  window.removeEventListener('resize', this.handleEventListener)
},
methods: {
  // 监听执行的事件
  handleEventListener() {
    
  },
}