小编典典

VueJS:为什么“ this”未定义?

javascript

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

当我引用this中的任何所述的生命周期钩(createdmountedupdated等等)它的计算结果为undefined

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

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

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

我收到以下错误:

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

为什么thisundefined在这些情况下进行评估?


阅读 1581

收藏
2020-04-25

共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);
}
2020-04-25