VueJS：为什么“ this”未定义？

Question

我正在使用Vue.js创建一个组件。

当我引用this中的任何所述的生命周期钩（created，mounted，updated等等）它的计算结果为undefined：

mounted: () => {
  console.log(this); // logs "undefined"
},

我的计算属性内部也发生了同样的事情：

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

我收到以下错误：

未捕获的TypeError：无法读取未定义的属性“ bar”

为什么this要undefined在这些情况下进行评估？

Answer 1

这两个示例都使用arrow函数()=>{}，该函数绑定this到与Vue实例不同的上下文。

根据文档：

不要在实例属性或回调（例如vm.$watch('a',newVal=>this.myMethod())）上使用箭头功能。由于箭头函数绑定到父上下文，因此this将不会是您期望的Vue实例，并且this.myMethod将是未定义的。

为了获得对thisVue实例的正确引用，请使用常规函数：

mounted: function () {
  console.log(this);
}

另外，您也可以使用ECMAScript 5速记功能：

mounted() {
  console.log(this);
}