VueJS：为什么“这个”没有定义？

Question

VueJS：为什么“这个”没有定义？我正在创建一个组件vue.js.当我提到this在任何一个生命周期钩 (created, mounted, updated等等)它评估为undefined:mounted: () => {   console.log(this); // logs "undefined"},同样的事情也发生在我的计算属性中：computed: {   foo: () => {      return this.bar + 1;    } }我得到以下错误：未定义类型错误：无法读取未定义的属性“bar”为什么this评估到undefined在这种情况下？

Answer 1

这两个示例都使用了箭头函数 () => { }，结合在一起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);}

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, …}