在事件处理程序中引用 `this` vue 组件答案

【问题标题】：Referring to `this` vue component within an event handler在事件处理程序中引用 `this` vue 组件
【发布时间】：2020-09-18 02:28:59
【问题描述】：

鉴于这个附加了全局事件监听器的 Vue 组件：

var app = new Vue({
    data: {
        foo: 0;
    },
    methods: {
        handle: function(e) {
            this.foo = 1; // this refers to handler, not app
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

为了更新组件状态，从事件处理程序中引用 this 的正确方法是什么？或者，有没有更好的方法在整个 window 上设置事件处理程序？

【问题讨论】：

How to access the correct this / context inside a callback? 是否适用于 Vue？
其实this绑定到vue实例
@Ifaruki 我相信你是对的，我对this 的假设是完全错误的！如果您将此添加为答案，我会接受它，因为它是正确的。
@YuvalAdam 我不明白这个问题，因为我重新创建了这个小应用程序，它工作正常
你试过这样挂载吗：function() { var ctx=this; window.addEventListener("keypress", ctx.handle); }

标签： javascript vue.js vue-component

【解决方案1】：

其实this是绑定到vue实例的，你的代码也能正常运行。

var app = new Vue({
    el: "#app",
    data: {
        foo: 0
    },
    methods: {
        handle: function(e) {
            this.foo++; 
            console.log(this.foo);
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
{{ foo }}
</div>

常见的错误是，例如，如果您有一个带有回调的函数，并且您尝试在回调中使用this，它将是undefined

    handle: function(e) {
        this.foo++; 
        setTimeout(function(){
           console.log(this.foo); //undefined
        })
        console.log(this.foo);
    }

你可以使用箭头函数

    handle: function(e) {
        this.foo++; 
        setTimeout(() =>{
           console.log(this.foo);
        })
        console.log(this.foo);
    }
},

或者如果它需要向后兼容，您可以使用.bind()

    handle: function(e) {
        this.foo++; 
        setTimeout(function(){
           console.log(this.foo);
        }.bind(this))
        console.log(this.foo);
    }
},

【讨论】：

【解决方案2】：

你的数据属性应该是一个函数，而不是一个对象。

data(){
 return {
  foo: 1
 }
}

【讨论】：

这一切都不是真的。示例代码几乎是 Vue 文档的直接副本，从答案中可以看出，显然工作得很好。
我说的都是真的。你真的改变了代码:)
vuejs.org/v2/guide/components.html 在页面某处解释了为什么数据应该是一个函数，只是为了最终确定我的观点:)，当然这不是它不起作用的原因，但总的来说那个意大利面代码，我看不到大局