Verstehen Sie die Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x und das Prinzip der Hook-Funktionen

Vue2.x-Nutzung

Globale Registrierung

Vue.directive(Direktivenname, {benutzerdefinierter Direktivenlebenszyklus})

Teilregistrierung

Anweisungen: {Anweisungsname, {Lebenszyklus der benutzerdefinierten Anweisung} }

verwenden

v-Anweisungsname: Attributname.Modifikator="Wert"

Hook-Funktion

bind - Wird aufgerufen, nachdem die benutzerdefinierte Direktive an das DOM gebunden wurde. Wird nur einmal aufgerufen. Hinweis: Es wird nur zum DOM hinzugefügt, aber das Rendering wird nicht abgeschlossen.

inserted – Das DOM, in dem sich die benutzerdefinierte Anweisung befindet. Wird aufgerufen, nachdem sie in das übergeordnete DOM eingefügt wurde. Das Rendern ist abgeschlossen (das Wichtigste)

update - Das Element wird aktualisiert, aber die untergeordneten Elemente wurden noch nicht aktualisiert. Dieser Hook wird aufgerufen (er wird ausgeführt, wenn die Komponente, in der sich die benutzerdefinierte Direktive befindet, aktualisiert wird, aber es gibt keine Garantie dafür, dass die Aktualisierung abgeschlossen wird) —> Bezogen auf die Komponente, in der sich die benutzerdefinierte Direktive befindet

componentUpdated – wird ausgeführt, nachdem die Komponente und ihre untergeordneten Komponenten aktualisiert wurden (die Komponente, in der sich die benutzerdefinierte Direktive befindet, wird aktualisiert, und die untergeordneten Komponenten werden ebenfalls aktualisiert),

—> Bezogen auf die benutzerdefinierte Komponente

unbind - Unbind (zerstören). (Wird ausgeführt, wenn der DOM, in dem sich die benutzerdefinierte Anweisung befindet, zerstört wird). Wird nur einmal aufgerufen

Hook-Funktionsparameter

Hinweis: In benutzerdefinierten Anweisungen können Sie dies nicht direkt verwenden

1. el: Das DOM-Element, in dem sich die aktuelle Anweisung befindet.

2. binding: ist ein Objekt, das die Attribute, Modifikatoren, Werte und andere Informationen der aktuellen Anweisung darstellt. Nur der Wert ist wichtig, häufig verwendet

arg : Zeichenfolge, Attributname. In v-my-directive:foo lautet der Attributname beispielsweise „foo“.

modifiers : Objekt, ein Objekt, das alle Modifikatoren enthält. Beispiel: In v-my-directive.foo.bar ist das Modifikatorobjekt { foo: true, bar: true }.

name : Zeichenfolge, Direktivenname, ohne das Präfix „v-“.

rawName , String, vollständiger Direktivenname, z. B. ist in v-my-directive:foo.bar="1 + 1" der vollständige Direktivenname v-my-directive:foo.bar="1 + 1"

value : Beliebig, der aktuelle Wert der Direktive-Bindung, zum Beispiel: in v-my-directive="1 + 1" ist der gebundene Wert 2. (Am wichtigsten)

expression : Zeichenfolge, deren Wert oder Ausdruck analysiert werden soll. Beispielsweise lautet der Ausdruck in v-my-directive="1 + 1" "1 + 1".

oldValue : Beliebig, der vorherige an die Direktive gebundene Wert, nur in Update- und ComponentUpdated-Hooks verfügbar. Verfügbar, unabhängig davon, ob sich der Wert geändert hat oder nicht.

oldArg : Beliebig, der vorherige Wert des Direktive-Attributnamens, nur in den Hooks „Update“ und „ComponentUpdated“ verfügbar. Verfügbar, unabhängig davon, ob sich der Wert geändert hat oder nicht.

3. vnode : aktuelle Knoteninformationen, Sie können die Instanz der Komponente abrufen, in der sich die aktuelle Anweisung befindet vnode.context – das Instanzobjekt, in dem sich die aktuelle Anweisung befindet

4. oldVnode : Der vorherige virtuelle Knoten, nur in den Hooks „Update“ und „componentUpdated“ verfügbar.

Vue3.x-Nutzung

Die Verwendung ist dieselbe wie bei Vue2.x

Globale Registrierung

Vue.directive(Direktivenname, {benutzerdefinierter Direktivenlebenszyklus})

Teilregistrierung

Anweisungen: {Anweisungsname, {Lebenszyklus der benutzerdefinierten Anweisung} }

verwenden

v-Anweisungsname: Attributname.Modifikator="Wert"

Globale Registrierung als Plugin

Hook-Funktion

Im Vergleich zu Vue2.x hat sich die Hook-Funktion geändert

Die endgültige API sieht wie folgt aus:

const MeineDirektive = {
  erstellt(el, binding, vnode, prevVnode) {}, // Hinzufügen beforeMount() {},
  montiert() {},
  beforeUpdate() {}, // Aktualisiert hinzufügen() {},
  beforeUnmount() {}, // Füge unmounted() {} hinzu
}

created - die Komponente, in der sich die benutzerdefinierte Direktive befindet, nach der Erstellung

beforeMount - ist in Vue2.x gebunden und wird aufgerufen, nachdem die benutzerdefinierte Anweisung an das DOM gebunden wurde. Wird nur einmal aufgerufen, Hinweis: Es wird nur zum DOM hinzugefügt, aber das Rendering wird nicht abgeschlossen.

mounted – wird in Vue2.x eingefügt, das DOM, in dem sich die benutzerdefinierte Anweisung befindet. Wird aufgerufen, nachdem es in das übergeordnete DOM eingefügt wurde. Das Rendering ist abgeschlossen (das Wichtigste)

beforeUpdate – Der DOM, in dem sich die benutzerdefinierte Anweisung befindet, die vor der Aktualisierung aufgerufen wird

updated – ist componentUpdated in Vue2.x

beforeUnmount - vor der Zerstörung

unmounted - nach der Zerstörung

Oben finden Sie detaillierte Informationen zum Verständnis der Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x sowie der Prinzipien von Hook-Funktionen. Weitere Informationen zu Vue2.x und Vue3.x finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!