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

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

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

mounted: () => {

console.log(this); // logs "undefined"

},


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

computed: {

foo: () => {

return this.bar + 1;

}

}

我收到以下错误:

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

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

回答:

这两个示例都使用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);

}

以上是 VueJS:为什么“ this”未定义? 的全部内容, 来源链接: utcz.com/qa/433113.html

回到顶部