Warum ist „dies' in den Pfeilfunktionen von Vue.js undefiniert?

VueJS: Lösung des „diesen“ undefinierten Problems

Pfeilfunktionen können in VueJS eine Falle sein und zu unerwarteten undefinierten Werten führen. Dies liegt daran, dass Pfeilfunktionen den Kontext ihres übergeordneten Elements erben und nicht an die Vue-Instanz gebunden sind.

Lebenszyklus-Hooks

Bei Verwendung von Pfeilfunktionen in Lebenszyklus-Hooks wie „mounted“ Dies bezieht sich nicht auf die Vue-Instanz. Stattdessen bezieht es sich auf den übergeordneten Kontext, bei dem es sich normalerweise um ein HTML-Element oder die Vue-Komponente handelt, die den gemounteten Hook ausgelöst hat.

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

Berechnete Eigenschaften

Pfeilfunktionen in berechneten Eigenschaften führen ebenfalls zu undefinierten Werten. Da sie den übergeordneten Kontext erben, bezieht sich dies nicht auf die Vue-Instanz.

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

Dies führt zu dem Fehler „Uncaught TypeError: Cannot read property 'bar' of undefined“.

Lösung

Um dieses Problem zu beheben, verwenden Sie reguläre Funktionen oder ECMAScript 5-Funktionskürzel anstelle von Pfeilen Funktionen:

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

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

Durch die Verwendung dieser Methoden können Sie sicherstellen, dass sich dies immer auf die Vue-Instanz bezieht und das erwartete Verhalten in Lebenszyklus-Hooks und berechneten Eigenschaften bereitstellt.

Das obige ist der detaillierte Inhalt vonWarum ist „dies' in den Pfeilfunktionen von Vue.js undefiniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!