VueJS:为什么"这个"未定义？

Question

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

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

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

---

在我的计算属性中也发生了同样的事情:

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

我收到以下错误:

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

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

Answer 1

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

根据文件:

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

为了获得对thisVue实例的正确引用,请使用常规函数:

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

或者,您也可以使用ECMAScript 5简写为函数:

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

Answer 2

您正在使用箭头函数。

该Vue的文件中明确规定不能在属性或回调使用箭头功能。

与常规函数不同，箭头函数不绑定this。相反，this在词法上是绑定的（即this保留其原始上下文的含义）。

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: ()=>{
    console.log(this)
  }
});

这会在控制台中记录以下对象：

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

而...如果我们使用常规函数（我们应该在 Vue 实例上使用）

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: function(){
    console.log(this)
  }
});

在控制台中记录以下对象：

hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}