Vue组件全局事件处理器中this的正确引用及绑定优化方案咨询

好问题！这是Vue开发中绑定全局window事件时非常容易踩的坑，我来给你详细说清楚解决方案和更专业的实践方式：

一、如何在事件处理器中正确引用组件实例的this #

你遇到的核心问题是：当window触发事件时，事件处理器handle的执行上下文是window，所以this指向的是window而非Vue组件实例。有三种常用的解决办法：

1. 使用bind()固定this指向 #

在添加事件监听器时，通过bind()将组件实例的this绑定到handle函数上，这样无论函数在哪里执行，this都会指向组件实例：

mounted: function() {
  window.addEventListener("keypress", this.handle.bind(this));
}

2. 用箭头函数包裹处理器 #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是mounted钩子中的组件实例），所以可以这样写：

mounted: function() {
  window.addEventListener("keypress", (e) => this.handle(e));
}

3. 在组件初始化时提前绑定 #

如果需要多次使用这个处理器，可以在created钩子中提前绑定this，后续直接使用绑定后的函数：

var app = new Vue({
  data: { foo: 0 },
  methods: {
    handle: function(e) {
      this.foo = 1;
    }
  },
  created: function() {
    // 提前绑定this，保存到组件实例上
    this.boundHandle = this.handle.bind(this);
  },
  mounted: function() {
    window.addEventListener("keypress", this.boundHandle);
  }
});

二、更优的全局window事件绑定方式 #

上面的方法能解决this问题，但还有个容易忽略的关键点：一定要在组件销毁时移除全局事件监听器，否则会造成内存泄漏。另外，还有更符合Vue生命周期的实践方式：

1. 绑定+移除配对使用 #

在组件的beforeUnmount（Vue2.x用beforeDestroy）钩子中移除对应的事件监听器，注意必须使用和绑定阶段完全相同的函数引用（所以提前保存绑定后的函数很重要）：

var app = new Vue({
  data: { foo: 0 },
  methods: {
    handle: function(e) {
      this.foo = 1;
    }
  },
  created: function() {
    this.boundHandle = this.handle.bind(this);
  },
  mounted: function() {
    window.addEventListener("keypress", this.boundHandle);
  },
  beforeUnmount: function() {
    // 组件销毁前移除监听器
    window.removeEventListener("keypress", this.boundHandle);
  }
});

2. Vue3组合式API的更简洁写法 #

如果是用Vue3的话，组合式API可以让逻辑更聚合，而且箭头函数的使用更自然，不需要额外绑定this：

import { onMounted, onUnmounted, ref } from 'vue';

export default {
  setup() {
    const foo = ref(0);
    
    const handleKeypress = (e) => {
      foo.value = 1;
    };

    onMounted(() => {
      window.addEventListener('keypress', handleKeypress);
    });

    onUnmounted(() => {
      window.removeEventListener('keypress', handleKeypress);
    });

    return { foo };
  }
};

3. 封装自定义指令（可选） #

如果多个组件都需要绑定全局事件，可以封装一个自定义指令，复用绑定/移除的逻辑，比如：

Vue.directive('global-keypress', {
  bind(el, binding) {
    const handle = (e) => {
      binding.value(e);
    };
    window.addEventListener('keypress', handle);
    // 把处理器存到元素上，方便解绑
    el._globalKeypressHandler = handle;
  },
  unbind(el) {
    window.removeEventListener('keypress', el._globalKeypressHandler);
    delete el._globalKeypressHandler;
  }
});

然后在组件模板中直接使用：

<div v-global-keypress="handle"></div>

内容的提问来源于stack exchange，提问作者Yuval Adam