在Vue中传递回调函数为何未丢失上下文？技术疑问

Great question! This behavior makes total sense once you understand how Vue handles methods under the hood. Here's the breakdown:

• Vue automatically binds this to methods in the methods option
  When your component initializes, Vue iterates over every method defined in the methods object and uses Function.prototype.bind() to permanently tie the method's this context to the component instance. This means no matter how you reference or pass the method—even as a callback to a global event listener like document.addEventListener—this inside the method will always point to your Vue component instance.

• Let's break down your specific code
  Your escapeKeyListener is defined in the methods block, so Vue has already bound its this to the component. When the keyup event fires on the document, the method is called with the correct context: this.closeCurrenciesPopup() correctly references the component's method, and this.showCurrenciesPopup = false updates the component's data as expected.

• What would happen without Vue's automatic binding?
  If you defined the function outside of methods (like directly in the created hook without manual binding), you'd hit the classic this loss issue:

  created() {
    // This would break because `this` would point to the document, not the component
    document.addEventListener('keyup', function(event) {
      if (event.keyCode === 27) {
        this.closeCurrenciesPopup(); // Error: closeCurrenciesPopup is not a function
      }
    });
  }
  

  To fix that, you'd have to manually bind this or use an arrow function—but Vue saves you from that extra work for methods.

In short: Vue takes care of binding this to your methods automatically, so you don't have to worry about context loss when passing them as callbacks.

内容的提问来源于stack exchange，提问作者Rodion Golovushkin