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