Я создаю компонент с здесь Глядя на вывод

Когда я ссылаюсь на this Простое «классовое» внедрение ловушки жизненного цикла (created, mounted, updated и т. Д.), Он оценивается как undefined:

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

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

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

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

Uncaught TypeError: Невозможно прочитать свойство ‘bar’ из неопределенного

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

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

Чтобы физически изменить страницу, вам нужно добавить rel = external к вашей ссылке. Функции стрелок Глядя на вывод

Переменная Vue Documentation четко заявляет, что не следует использовать функции стрелок для свойства или обратного вызова.

В отличие от обычной функции, функция стрелки не связывает 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, …}