检测用户是否离开标签，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);    }}