Details der benutzerdefinierten Vue-Anweisung

1. Hintergrund

Ich hatte kürzlich ein Vorstellungsgespräch und der Interviewer fragte nach benutzerdefinierten Anweisungen. Da ich nicht sehr oft benutzerdefinierte Anweisungen verwende, habe ich einfach die offizielle Dokumentation gelesen und wusste ungefähr, dass ich Vue.directive verwenden musste, um Anweisungen anzupassen. Nach dem Vorstellungsgespräch suchte ich sofort online nach Informationen zu benutzerdefinierten Anweisungen und stellte fest, dass es noch viel über benutzerdefinierte Anweisungen zu lernen gibt. Deshalb wollte ich einen Blog schreiben, um dies aufzuzeichnen und mich selbst anzuspornen, mehr auszuprobieren und mehr zu lernen! ! !

Dies ist das offizielle Dokumentationsmodul zu benutzerdefinierten Anweisungen. Zu den benutzerdefinierten Anweisungen zählen globale und lokale benutzerdefinierte Anweisungen.

2. Lokale benutzerdefinierte Anweisungen

Wenn Sie lokale Anweisungen registrieren möchten, akzeptiert die Komponente auch eine directives :

@Komponente({
  Name: "BenutzerdefinierteRichtlinien",
  Komponenten: {},
  Anweisungen: {
    // Lokale benutzerdefinierte Direktive custom1: {
      eingefügt(el) {
        console.log("el", el);
        el.style.position = "absolut";
        el.style.top = "50 %";
        el.style.left = "50 %";
        el.style.transform = "übersetzen(-50%,-50%)";
        el.innerText = "Wird geladen...";
        el.style.padding = "10px";
        el.style.color = "#333";
      },
    },
  },
})

3. Globale benutzerdefinierte Anweisungen

Vue.direktive("custom2", {
  eingefügt(el, Bindung) {
    console.log("Bindung", Bindung);
    if (Bindung und Bindungswert) {
      el.innerText = "Globale benutzerdefinierte Anweisungen testen";
      console.log("el", el);
      el.style.position = "absolut";
      el.style.top = "50 %";
      el.style.left = "50 %";
      el.style.transform = "übersetzen(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});

4.1 Benutzerdefinierte Befehls-Hook-Funktion

• bind : Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird. Hier können Sie eine einmalige Initialisierungseinrichtung durchführen.
• inserted : wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es wird nur garantiert, dass der übergeordnete Knoten existiert, es ist jedoch nicht notwendigerweise erforderlich, dass er in das Dokument eingefügt wurde).
• update : Wird aufgerufen, wenn VNode der Komponente aktualisiert wird. Dies kann jedoch geschehen, bevor die untergeordneten VNode aktualisiert werden. Der Wert der Anweisung kann sich geändert haben, muss es aber nicht. Sie können jedoch unnötige Vorlagenaktualisierungen ignorieren, indem Sie die Werte vor und nach der Aktualisierung vergleichen (detaillierte Parameter der Hook-Funktion finden Sie weiter unten).
• componentUpdated : Wird aufgerufen, nachdem der VNode der Komponente, in der sich die Anweisung befindet, und alle seine untergeordneten VNodes aktualisiert wurden.
• unbind : Wird nur einmal aufgerufen, wenn die Direktive vom Element getrennt wird.

4.2 Hook-Funktionsparameter

• el : Das Element, an das die Anweisung gebunden ist, mit der das DOM direkt manipuliert werden kann.
• binding : ein Objekt,

Enthält die folgenden Eigenschaften:

• name : Der Name der Direktive ohne das Präfix „v-“.
• value : Der Bindungswert der Direktive. Beispielsweise ist in v-my-directive="1 + 1" der Bindungswert 2.
• oldValue : Der vorherige Wert der Direktivebindung, nur in Update- und ComponentUpdated-Hooks verfügbar. Verfügbar, unabhängig davon, ob sich der Wert geändert hat oder nicht.
• expression : ein direktiver Ausdruck in Zeichenfolgenform. Beispielsweise lautet der Ausdruck in v-my-directive="1 + 1" "1 + 1".
• arg : An den Befehl übergebener Parameter, optional. In v-my-directive:foo lautet der Parameter beispielsweise „foo“.
• modifiers : Ein Objekt, das Modifikatoren enthält. Beispiel: In v-my-directive.foo.bar ist das Modifikatorobjekt { foo: true, bar: true }.
• vnode : Der durch die Vue-Kompilierung generierte virtuelle Knoten. Weitere Einzelheiten finden Sie in der VNode-API.
• oldVnode : Der vorherige virtuelle Knoten, nur in den Hooks „Update“ und componentUpdated verfügbar.
  

4.3 Dynamische Befehlsparameterübertragung

Vue.direktive("custom2", {
  eingefügt(el, Bindung) {
    console.log("Bindung", Bindung);
    if (Bindung und Bindungswert) {
      el.innerText = "Globale benutzerdefinierte Anweisungen testen";
      console.log("el", el);
      el.style.position = "absolut";
      el.style.top = "50 %";
      const arg = (Bindung wie beliebig).arg;
      el.style[arg] = "50 %";
      el.style.transform = "übersetzen(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});


 <div v-custom2:[direction]="true"></div>
 
  private Richtung = "links";

5. Verlängerung

Nachdem der Interviewer nach benutzerdefinierten Anweisungen gefragt hatte, welche Standardanweisungen Sie normalerweise verwenden.
Ich habe geantwortet: v-for v-if v-show v-model und so weiter. Dann kam die Frage: Können v-for und v-if gleichzeitig verwendet werden? Ich habe geantwortet: Nein, bei gleichzeitiger Verwendung treten Leistungsprobleme auf.
F: Warum gibt es Leistungsprobleme?
Ich antwortete: Wenn Sie jedes Mal das gesamte Array durchlaufen müssen, wirkt sich dies auf die Geschwindigkeit aus, insbesondere wenn Sie nur einen kleinen Teil rendern müssen.
F: Wie vermeide ich die gemeinsame Verwendung von v-for und v-if?
ICH:? ? ? Diese Situation tritt bei der Arbeit nicht oft auf. Im Allgemeinen wird v-if in die Durchlaufschleife eingefügt (tatsächlich gibt es immer noch Leistungsprobleme).
Nach dem Interview habe ich einige Informationen nachgeschlagen und festgestellt, dass v-for und v-if nicht zusammen verwendet werden sollten und bei Bedarf durch computed Eigenschaften ersetzt werden sollten.

Dies ist das Ende dieses ausführlichen Artikels über benutzerdefinierte Vue-Anweisungen. Weitere relevante benutzerdefinierte Vue-Anweisungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!