VueJS：为什么“这个”是未定义的？

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

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

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

---

同样的事情也发生在我的计算属性：

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

我得到以下错误：

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

为什么this评估在这些情况下是undefined ？

Answer 1

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

根据文件 ：

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

为了得到this Vue实例的正确引用，使用一个常规函数：

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

或者，您也可以使用ECMAScript 5简写function：

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