Was ist der Unterschied zwischen globalen Methoden und Instanzmethoden in Vue?

Der Unterschied zwischen globalen Methoden und Instanzmethoden in vue: 1. Globale Methoden werden über „Vue.myGlobalMethod“ aufgerufen, und Instanzmethoden werden über „this.$myMethod“ aufgerufen. 2. Globale Methoden sind statische Methoden, die unter vue definiert sind. Instanzmethoden können innerhalb von Komponenten definiert werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue-Version 2.9.6, DELL G3-Computer.

Was ist der Unterschied zwischen globalen Methoden und Instanzmethoden in Vue?

Um die Wiederverwendbarkeit zu verbessern und den Code zu vereinfachen, ist es während der Entwicklung häufig erforderlich, die gemeinsamen Teile des Codes zu extrahieren, um ein wiederverwendbares Modul zu bilden . Nachdem der Code extrahiert wurde, um Module zu bilden, müssen diese Module als globale Attribute festgelegt werden, damit überall darauf verwiesen werden kann. Um globale öffentliche Methoden zu implementieren, müssen wir die folgenden Wissenspunkte kennen:

Wie man globale Eigenschaften festlegt;

Globale Eigenschaften können unterteilt werden in: global Methode für Variablen und globale Eigenschaften. Eine gängige Methode zur Implementierung globaler Variablen ist die Verwendung von vuex (die Verwendung von vuex wird hier nicht im Detail erläutert). Eine andere Möglichkeit besteht darin, Prototypattribute zu verwenden, um dies zu erreichen. Als nächstes werde ich mich auf Prototypen konzentrieren.

2. Auf globale Eigenschaften verweisen

Bei Verwendung von Vue müssen wir diese Codezeichenfolge schreiben:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Der obige Code verwendet den Vue-Konstruktor, um ein Vue-Objekt zu erstellen.

Daraus ist ersichtlich, dass Vue tatsächlich ein Objekt ist. Dann können wir den Prototyp von Vue verwenden, um Verweise auf globale Eigenschaften zu implementieren. Zunächst müssen wir die folgenden Wissenspunkte verstehen:

Was ist ein Prototyp?

Im JS-Code sehen wir oft einen Attributprototyp. Es ist ein Attribut des Konstruktors (der Funktion, die zum Erstellen eines Objekts verwendet wird) und wird verwendet, um auf das Prototypobjekt zu verweisen. Was ist also ein Prototypobjekt? Um „Prototyp-Objekt“ zu verstehen, müssen wir zur Erklärung „Prototyp“ und „Objekt“ trennen.

Lass uns zuerst über Objekte sprechen. Es gibt viele integrierte Objekte in js, wie zum Beispiel: String, Math, Object, Array usw.

// 声明一个数组对象
const arr = Array();

Das Obige besteht darin, das integrierte Objekt – den Konstruktor des Arrays – zu verwenden, um ein Array zu erstellen.

Natürlich können wir auch ein benutzerdefiniertes Objekt festlegen, also selbst ein neues Objekt festlegen.

const obj = {};

Der obige Code legt ein leeres Objekt fest.

Vue-Instanzen stellen einige nützliche Instanzeigenschaften und -methoden bereit. Diesen Eigenschaften und Methoden wird $ vorangestellt, um sie von den Dateneigenschaften des Proxys zu unterscheiden Wurzel der aktuellen Komponentenbauminstanz

$children: wird verwendet, um auf die direkte untergeordnete Komponenteninstanz der aktuellen Komponenteninstanz zuzugreifen

$refs: wird verwendet, um auf die untergeordnete Komponente der V-Ref-Direktive zuzugreifen
DOM-Zugriff
$el: wird zum Mounten des DOM-Elements der aktuellen Komponenteninstanz verwendet
$els: wird zum Zugriff auf das DOM-Element mithilfe der v-el-Anweisung im $el-Element verwendet
Der Unterschied

ist eine globale Methode, die als window.myGlobalMethod verstanden werden kann und über Vue.myGlobalMethod aufgerufen wird. Es handelt sich lediglich um eine statische Methode, die unter Vue definiert ist.

Instanzmethode Erinnern Sie sich an das Konzept der Klassen in JS und die Bedeutung der Prototyp-Prototypkette . Wenn Sie es nicht verstehen, schauen Sie sich zuerst diese grundlegenden Inhalte an.
• Hier kann ich es Ihnen erklären, Instanzmethoden können dadurch innerhalb der Komponente aufgerufen werden.$myMethod
  [Verwandte Empfehlung: „
vue.js Tutorial
• “]

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen globalen Methoden und Instanzmethoden in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!