VueJS: почему "это" не определено?

Я создаю компонент с Vue.js.

когда я ссылка this в разделе жизненный цикл крючки (created, mounted, updated, etc.) он оценивает в undefined:

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

то же самое происходит и внутри моих вычисляемых свойств:

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

Я получаю следующую ошибку:

Uncaught TypeError: не удается прочитать свойство "bar" неопределено

почему this оценка для undefined в этих случаях?

19
javascript this vue.js vuejs2

2 ответов

оба этих примера используют функции стрелочку () => { }, который обязывает 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);
}
53

вы используете функции стрелочку.

на Документация 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, …}

1