VueJS:为什么“ this”未定义?
我正在使用Vue.js创建一个组件。
当我引用this
中的任何所述的生命周期钩(created
,mounted
,updated
等等)它的计算结果为undefined
:
mounted: () => { console.log(this); // logs "undefined"
},
我的计算属性内部也发生了同样的事情:
computed: { foo: () => {
return this.bar + 1;
}
}
我收到以下错误:
未捕获的TypeError:无法读取未定义的属性“ bar”
为什么this
要undefined
在这些情况下进行评估?
回答:
这两个示例都使用arrow函数()=>{}
,该函数绑定this
到与Vue实例不同的上下文。
根据文档:
不要在实例属性或回调(例如
vm.$watch('a',newVal=>this.myMethod())
)上使用箭头功能。由于箭头函数绑定到父上下文,因此this
将不会是您期望的Vue实例,并且this.myMethod
将是未定义的。
为了获得对this
Vue实例的正确引用,请使用常规函数:
mounted: function () { console.log(this);
}
另外,您也可以使用ECMAScript 5速记功能:
mounted() { console.log(this);
}
以上是 VueJS:为什么“ this”未定义? 的全部内容, 来源链接: utcz.com/qa/433113.html