ES6箭头功能＆＃39;这个＆＃39;在vue.js官方github示例中拼图

Question

这是来自github示例小提琴vail.js官方网站的我的分支：vue.js github example fiddle

fetchData 函数表达式中的console.log(this)，并输出vue组件实例：

但是当我使用带有 fetchData （fiddle of arrow function this）的箭头功能时，它console.log(this)为window

我学过箭头功能概念，但我仍然混淆this。为什么第二个小提琴this绑定到全局窗口对象，第一个小提琴this绑定到 vue组件实例？

我使用箭头功能this的条件是什么？

Answer 1

你应该从不使用箭头功能来定义具有Vue的方法，因为使用箭头功能，this是defined lexically。

  

箭头函数不会创建自己的这个，这个值是   使用封闭执行上下文。

这意味着，使用Vue方法，this将指向全局对象或窗口。

当实例化Vue时，Vue将methods中定义的方法绑定到Vue对象。箭头函数无法绑定。 this始终是最初的。

在这种情况下，您应该始终使用普通函数来编写Vue方法。

这也适用于数据函数，计算值和生命周期钩子。您通常使用箭头函数的唯一时间是在里面定义一个方法或计算值时，就像定义ajax调用的回调一样。

请参阅VueJS: why is “this” undefined?。

注意：一个异常从不使用箭头函数来定义Vue方法，如果您从未在所有中引用this 方法。这些案件非常罕见。您几乎总是需要使用this在方法中引用Vue的其他部分。在这种情况下，它应该很快成为一种习惯，简单地永远不会用箭头函数定义Vue方法。