Warum wird „dies' in Vue.js Lebenszyklus-Hooks und berechneten Eigenschaften undefiniert?

VueJS: „this“ undefiniert in Lifecycle-Hooks und berechneten Eigenschaften

In Vue.js kann es vorkommen, dass Sie auf Situationen stoßen, in denen der Zugriff auf „this“ erfolgt Das Schlüsselwort „ innerhalb von Lebenszyklus-Hooks oder berechneten Eigenschaften gibt „undefiniert“ zurück. Dies tritt auf, wenn Pfeilfunktionen verwendet werden.

Ursache:

Pfeilfunktionen () => {} Binden Sie das Schlüsselwort „this“ an den Kontext außerhalb der Vue-Instanz. Das bedeutet, dass sich „dies“ innerhalb einer Pfeilfunktion auf den übergeordneten Bereich bezieht, nicht auf die Vue-Instanz selbst.

Beispiel 1:

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

In diesem Beispiel Die für den Hook „mounted“ verwendete Pfeilfunktion bindet „this“ nicht an die Vue-Instanz.

Beispiel 2:

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

Hier verwendet die berechnete Eigenschaft eine Pfeilfunktion, die dazu führt, dass der Verweis auf „this.bar“ als undefiniert ausgewertet wird, was zu dem Fehler „Eigenschaft ‚bar‘ kann nicht gelesen werden“ führt. von undefiniert.“

Lösung:

Um dieses Problem zu beheben und auf den richtigen Verweis auf „dies“ zuzugreifen, verwenden Sie reguläre Funktionen oder die ES5-Kurzschrift:

Reguläre Funktion:

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

ES5-Kurzschrift:

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

By Mit diesen Ansätzen stellen Sie sicher, dass sich „dies“ innerhalb von Lebenszyklus-Hooks und berechneten Eigenschaften auf die Vue-Instanz bezieht.

Das obige ist der detaillierte Inhalt vonWarum wird „dies' in Vue.js Lebenszyklus-Hooks und berechneten Eigenschaften undefiniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!