我正在使用Vue.js创建一个组件。
当我引用this中的任何所述的生命周期钩(created,mounted,updated等等)它的计算结果为undefined:
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将是未定义的。
vm.$watch('a',newVal=>this.myMethod())
this.myMethod
为了获得对thisVue实例的正确引用,请使用常规函数:
mounted: function () { console.log(this); }
另外,您也可以使用ECMAScript 5速记功能:
mounted() { console.log(this); }