Vue-Komponenteninstanz

In Vue.js ist eine Komponenteninstanz einer der grundlegendsten Bausteine einer Vue-Anwendung. Jede Komponenteninstanz ist eine Vue-Komponente, die über ihr eigenes Template, eigene Daten, Methoden und Lifecycle-Hooks verfügt und ihren eigenen Zustand und ihr eigenes Verhalten unabhängig verwalten kann. Das Folgende ist eine detaillierte Einführung in Vue-Komponenteninstanzen:

Erstellen einer Vue-Komponenteninstanz

In Vue.js wird eine Komponenteninstanz typischerweise mit der Methode createApp und einem Komponentenoptionsobjekt erstellt.

Das Komponentenoptionsobjekt kann die folgenden Eigenschaften enthalten:

  • data: Datenobjekt, das zum Speichern der reaktiven Daten der Komponente verwendet wird.
  • props: Props-Array oder -Objekt, das zum Empfangen von Daten verwendet wird, die von der Elternkomponente übergeben werden.
  • computed: Objekt für berechnete Eigenschaften, das dynamisch auf Basis reaktiver Abhängigkeiten berechnet wird.
  • methods: Methodenobjekt, das Funktionen und Operationen innerhalb der Komponente enthält.
  • watch: Watcher-Objekt, das verwendet wird, um Datenänderungen zu beobachten und entsprechend darauf zu reagieren.
  • template: String, der die Template-Struktur der Komponente definiert.
  • render: Funktion, die verwendet wird, um das virtuelle DOM der Komponente zu rendern.
  • setup: Funktion, die verwendet wird, um den anfänglichen Zustand, Daten, berechnete Eigenschaften und Watcher der Komponente einzurichten (in Vue 3).

Das Folgende ist ein Beispiel für eine einfache Vue-Komponenteninstanz:

Beispiel

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Greet</button>
    </div>
  `
});

app.mount('#app');

Erklärung:

  • dataDie Funktion gibt ein Objekt zurück, das einemessageEigenschaft, die verwendet wird, um den Zustand der Komponente zu speichern.
  • methodsDas Objekt enthält einegreetMethode; wenn auf die Schaltfläche geklickt wird, erscheint ein Meldungsfenster, das Folgendes anzeigt:messageden Inhalt von.
  • templateDie Zeichenfolge definiert die Template-Struktur der Komponente und verwendet Interpolation und Ereignisbindung, um Datenanzeige und Interaktion zu erreichen.

Lebenszyklus-Hooks

Vue-Komponenteninstanzen verfügen über Lebenszyklus-Hook-Funktionen, mit denen Entwickler benutzerdefinierte Logik in verschiedenen Phasen des Lebenszyklus der Komponente ausführen können. Zu den gängigen Lebenszyklus-Hooks gehörencreated、mounted、updatedunddestroyedusw.

Beispiel

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Komponente aktualisiert');
  },
  destroyed() {
    console.log('Component destroyed');
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});

Komponentenkommunikation

Vue-Komponenteninstanzen kommunizieren miteinander über Props, Events, provide/inject, $parent/$children, $attrs/$listeners und andere Methoden, abhängig von der Beziehung zwischen den Komponenten und ihren Anforderungen. Diese Mechanismen ermöglichen es Komponenten, Daten zwischen verschiedenen Ebenen weiterzugeben und auf Benutzerinteraktionen zu reagieren.

Eigenschaften der Komponenteninstanz

$data

Die $data-Eigenschaft enthält alle Dateneigenschaften der Komponenteninstanz. Sie ist reaktiv, das bedeutet, dass bei Änderungen der Daten die zugehörigen Ansichten automatisch aktualisiert werden.

Beispiel

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

const vm = app.mount('#app');
console.log(vm.$data); // { message: 'Hello, Vue!' }

$props

Die $props-Eigenschaft enthält alle Props, die von der Elternkomponente übergeben werden und die die aktuelle Komponente empfängt. Sie ist schreibgeschützt.

Beispiel

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  }
};
</script>

Beispiel

// ChildComponent.vue
export default {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 'Message from parent'
  }
};

$refs

$refs enthält alle DOM-Elemente oder untergeordneten Komponenteninstanzen innerhalb der Komponente, die das ref-Attribut besitzen. Auf diese Elemente oder Komponenteninstanzen kann über $refs zugegriffen werden.

Beispiel

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // Zugriff auf DOM-Element
this.$refs.inputField.focus(); // DOM-Element-Methode aufrufen
  }
}
</script>

Die $el-Eigenschaft repräsentiert das Wurzel-DOM-Element der aktuellen Komponenteninstanz. Auf diese Eigenschaft kann erst zugegriffen werden, nachdem die Komponente gemountet wurde.

Beispiel

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');
console.log(vm.$el); // <div id="app">Hallo, Vue!</div>

$attrs

$attrs enthält alle Attribute, die von der übergeordneten Komponente an die aktuelle Komponente übergeben, aber nicht in der untergeordneten Komponente deklariert wurden. Diese Attribute können verwendet werden, um zusätzliche Nicht-Prop-Attribute an untergeordnete Komponenten zu übergeben.

Beispiel

<!-- ParentComponent.vue -->
<template>
  <child-component custom-attr="value"></child-component>
</template>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    console.log(this.$attrs); // { custom-attr: 'value' }
  }
};
</script>

$listeners

$listeners enthält alle Listener (Event-Handler), die von der übergeordneten Komponente an die aktuelle Komponente übergeben werden, und kann direkt an das Root-Element der Komponente oder andere Elemente gebunden werden.

Beispiel

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Klick mich</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners); // { click: handleClick }
  },
  methods: {
    handleClick() {
      console.log('Button geklickt');
    }
  }
};
</script>

Komponenteninstanz-Methoden

$mount()

Die Methode $mount() montiert eine Vue-Komponente manuell an ein DOM-Element. In Vue 3 erfolgt die Montage normalerweise automatisch über createApp().mount(), und eine manuelle Montage ist nur in wenigen Fällen erforderlich.

Beispiel

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');

$destroy()

Die Methode $destroy() zerstört die aktuelle Komponenteninstanz, löst die Bindung aller ihrer Ereignis-Listener und gibt die von ihr belegten Ressourcen frei. Sie ist in bestimmten Szenarien nützlich, z. B. beim dynamischen Erstellen und Zerstören von Komponenten.

Beispiel

vm.$destroy();

$emit()

Die Methode $emit() wird verwendet, um benutzerdefinierte Ereignisse auf der aktuellen Komponenteninstanz auszulösen und Daten an die übergeordnete Komponente zu übergeben. Sie wird normalerweise zusammen mit der v-on-Direktive verwendet.

Beispiel

<button @click="$emit('custom-event', eventData)">Klick mich</button>

$nextTick()

Die Methode $nextTick() führt die angegebene Callback-Funktion aus, nachdem der nächste DOM-Aktualisierungszyklus beendet ist. Sie wird verwendet, um einige Operationen nach der Aktualisierung des DOM auszuführen.

Beispiel

vm.$nextTick(() => {
  // Operationen, die nach Abschluss des DOM-Updates ausgeführt werden
});

$watch()

Die Methode $watch() wird verwendet, um Datenänderungen auf der Komponenteninstanz zu beobachten und die angegebene Callback-Funktion auszuführen, wenn sich Daten ändern.

Beispiel

vm.$watch('message', (newValue, oldValue) => {
  console.log(`Nachricht geändert von ${oldValue} zu ${newValue}`);
});

Diese Eigenschaften und Methoden verleihen Vue-Komponenteninstanzen umfangreiche Funktionalität und Flexibilität und können die vielfältigen Anforderungen von Entwicklern beim Erstellen komplexer Anwendungen erfüllen. Von der Datenverwaltung über die Ereignisbehandlung bis hin zu dynamischen Komponentenoperationen kann alles über Komponenteninstanzen verwaltet und gesteuert werden.

Andere Erweiterungen