检测用户是否离开标签，Vuejs

Question

我在这里找到了一个很好的例子，看起来符合我的需要，我尝试在我的Vuejs应用程序中实现它。，但到目前为止，没有检测到任何更改，并且此代码没有错误。data() {    return {      tabFocus:false,    }}created() {  this.detectFocusOut();},watch:{    tabFocus(value) {      console.log("New value:", value);    },} methods:{    detectFocusOut() {      console.log("It is here");      var inView = false;      window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function(        e      ) {        if ({ focus: 1, pageshow: 1 }[e.type]) {          if (inView) return;          this.tabFocus = true;          inView = true;        } else if (inView) {          this.tabFocus = !this.tabFocus;          inView = false;        }      };    },}

Answer 1

那是因为this分配给window.onfocus等的函数中的 不是指 VueJS 应用程序本身，而是指window对象。如果将其转换为箭头函数，它应该可以工作：

methods:{

    detectFocusOut() {

        console.log("It is here");

        var inView = false;

        window.onfocus = window.onblur = window.onpageshow = window.onpagehide = (e) => {

            if ({ focus: 1, pageshow: 1 }[e.type]) {

                if (inView) return;

                this.tabFocus = true;

                inView = true;

            } else if (inView) {

                this.tabFocus = !this.tabFocus;

                inView = false;

            }

        };

    },

}

就个人而言，我建议不要使用菊花链分配。您可以简单地将所有这些逻辑抽象为一个函数：

methods:{

    detectFocusOut() {

        let inView = false;

        const onWindowFocusChange = (e) => {

            if ({ focus: 1, pageshow: 1 }[e.type]) {

                if (inView) return;

                this.tabFocus = true;

                inView = true;

            } else if (inView) {

                this.tabFocus = !this.tabFocus;

                inView = false;

            }

        };

        window.addEventListener('focus', onWindowFocusChange);

        window.addEventListener('blur', onWindowFocusChange);

        window.addEventListener('pageshow', onWindowFocusChange);

        window.addEventListener('pagehide', onWindowFocusChange);

    }

}