vue中的this指向问题

今天遇到一个关于vue中this指向的问题，解决问题之后进行一个this指向的总结

        看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。

        但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。

        在Vue的官方文档是这么解释的：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

1. Vue中生命周期钩子和自定义方法中的this指向当前的 Vue 实例：

        生命周期钩子的 this 上下文指向调用它的 Vue 实例

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

2. Vue 中回调函数中的 this：

        若回调函数为匿名函数，非严格模式下指向 window,严格模式下为 undefined。
        若回调函数为自定义方法，则 this 指向 Vue 实例。
        若回调函数为 箭头函数，则 this 指向 Vue 实例。
3. Vue 中 addEventListener 中的 this

        通常，事件监听函数中的 this 都指向绑定事件的那个元素, 但是在 Vue 中，监听函数中的 this 也指向 Vue 实例