javascript - tutorial - vue.js download

VueJS: ¿por qué "esto" no está definido?

Question

Estoy creando un componente con Vue.js

Cuando hago referencia a this en cualquiera de los ganchos del ciclo de vida ( created , mounted , updated , etc.) se evalúa como undefined :

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

Lo mismo ocurre también dentro de mis propiedades calculadas:

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

Obtuve el siguiente error:

TypeError no capturado: no se puede leer la propiedad ''barra'' de undefined

¿Por qué this evalúa como undefined en estos casos?

Answer 1

Ambos ejemplos usan una función de flecha () => { } , que une this a un contexto diferente de la instancia de Vue.

Según la documentation :

No utilice las funciones de flecha en una propiedad de instancia o devolución de llamada (por ejemplo, vm.$watch(''a'', newVal => this.myMethod()) ). Como las funciones de flecha están vinculadas al contexto principal, this no será la instancia de Vue como cabría esperar y this.myMethod no estará definido.

Para obtener la referencia correcta de this como la instancia de Vue, use una función regular:

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

Alternativamente, también puede usar la abreviatura ECMAScript 5 para una función:

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

Answer 2

Estás utilizando funciones de flecha .

La documentación de Vue establece claramente que no debe usar las funciones de flecha en una propiedad o devolución de llamada.

A diferencia de una función regular, una función de flecha no une this . En cambio, this está ligado léxicamente (es decir, this mantiene su significado de su contexto original).

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

Esto registra el siguiente objeto en la consola:

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

Mientras que ... Si usamos una función regular (que deberíamos en una instancia de Vue)

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

Registra el siguiente objeto en la consola:

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