Vue.js-Anwendung verbessern. Einige praktische Tipps
Dominik Grzedzielski
Senior Software Engineer
Vue ist ein schnell wachsendes progressives Framework für die Erstellung von Benutzeroberflächen. Es wurde das JavaScript-Framework mit den meisten Sternen auf GitHub und das am höchsten bewertete Projekt der Jahre 2016 und 2017 auf demselben Portal.
Erstellen von Anwendungen in Vue ist an sich sehr einfach, aber wenn Sie qualitativ hochwertige Anwendungen erstellen wollen, müssen Sie sich schon etwas mehr Mühe geben.
Teil sein von Der CodestTeam und echter Verfechter der Vue-Technikmöchte ich Ihnen einige Tipps (nicht aus den offiziellen Vue-Dokumenten kopiert), die mühelos die Code Qualität und die Leistung von Vue-Anwendungen.
Wenden Sie als erstes den Vue Style Guide und ESLint an
Sie können dort vier Regelkategorien finden. Drei davon sind uns besonders wichtig:
Wesentlich Regeln, die uns vor Fehlern bewahren,
Empfohlen und dringend empfohlen Regeln für die Einhaltung bewährter Praktiken - zu Qualität verbessern und die Lesbarkeit des Codes.
Sie denken vielleicht: "Was?! Muss ich mir jede Regel merken?" Natürlich müssen Sie das nicht. Sie können ESLint verwenden, um diese Regeln für Sie zu erledigen. Sie müssen nur alles richtig in der ESLint-Konfigurationsdatei einstellen. Ich schlage vor, dass Sie die empfohlen Voreinstellung da Sie ein völlig kostenloses Regelwerk erhalten, das Ihnen bei der Erstellung von Anwendungen mit bewährten Verfahren hilft. Wie wird es eingerichtet?
Standardmäßig sollten Sie Folgendes finden erweitert Schlüssel in der ESLint-Konfiguration und ersetzen Sie "plugin:vue/essential" mit "plugin:vue/recommended"das ist alles.
Natürlich gibt es ein paar Regeln, die Sie beachten sollten, denn ESLint kann nicht alles selbst erledigen. Zum Beispiel:
einheitliche Namensgebung,
Benennung von Ereignissen im Kebab-Fall,
Voranstellen von $_Namensraum_ private Eigenschaften in Plugins, Mixins, etc,
Reihenfolge der Elemente der obersten Ebene einer einzelnen Dateikomponente.
Verwenden Sie nicht mehrere v-if
Es kann manchmal notwendig sein, bedingt mehr als ein Element zu rendern, aber die Leute schreiben oft etwas in dieser Art:
Inhalt
Inhalt
Inhalt
Das ist unnötig, weil wir es eleganter schreiben können:
Was aber, wenn wir dies als Wurzelelement tun wollen? In Vuekönnen wir nicht verwenden <template> für diesen Zweck. In manchen Fällen kann eine Umhüllung mit div ausreichen.
Das ist in Ordnung, aber so sehr wir auch wollen, manchmal können wir Elemente nicht in div einpacken, zum Beispiel wegen der HTML-Semantik (z.B. muss ein direktes Kind sein von
oder ). Wenn wir also schreiben müssen:
(( item.name ))
...und wir werden einen Fehler wie diesen sehen:
Wir können damit umgehen, indem wir mit JSX und einer funktionalen KomponenteAuch hier sollten wir einen Booleschen Wert übergeben, der das v-if ersetzt.
</>
Keine API-Aufruf-Handler in Komponenten schreiben
Eigentlich ist dies nur eines der Beispiele dafür, was man in Komponenten nicht tun sollte. Tun Sie einfach das, was lokal in der Komponentenlogik notwendig ist. Jede Methode, die extern sein könnte, sollte abgetrennt und nur in den Komponenten aufgerufen werden, z. B. in der Geschäftslogik.
Verwendung von Steckplätzen statt großer Mengen von Requisiten
Manchmal ist die Verwendung von Requisiten ausreichend, aber es gibt auch Fälle, in denen sie nicht effizient sind. Das kann in Situationen passieren, in denen wir zu viele Requisiten hinzufügen müssen, damit die Komponente so funktioniert, wie wir es wollen. Das einfachste Beispiel könnte eine Schaltflächenkomponente sein. Zweifelsohne handelt es sich um eine Komponente, die überall in einer Anwendung verwendet werden kann. Betrachten wir also eine Schaltflächenkomponente wie diese.
(( Text ))
In diesem Stadium ist es eine einfache Komponente, die nur Textrequisiten akzeptiert. Ok, aber es kann nicht genug sein, da wir Icons in der Schaltfläche benötigen werden. In diesem Fall müssen wir 2 weitere Requisiten hinzufügen (2, weil wir die Möglichkeit haben wollen, sie vor oder nach dem Text einzufügen). Die Komponente wird also wie folgt aussehen:
(( Text ))
Es ist nicht schlecht, wir haben nur 3 Stützen, aber...
Was ist, wenn wir einen Belastungsindikator benötigen? Nun, dann müssten wir eine weitere Stütze hinzufügen. Und das für jede neue Funktion! Klingt es jetzt herausfordernd, mit dem Wachstum der Anzahl der Komponenten Schritt zu halten? Ja, das tut es, definitiv!
Verwenden wir stattdessen Steckplätze.
Einfacher, nicht wahr? Ok, aber wie können wir die Funktion "Symbol hinzufügen" bekommen? Das ist wirklich einfach! Verwenden Sie einfach die Komponente wie folgt:
Zurück
Weiter
Einfacher Weg zur Leistungssteigerung
Ich werde Ihnen einige Tipps geben, die wirklich einfach umzusetzen sind, so dass Sie sofort davon profitieren können.
Faule Lastrouten
Manchmal gibt es Routen, die nur für Admins oder Benutzer mit besonderem Zugang verfügbar sind, oder sie werden weniger besucht als andere. Das sind perfekte Fälle für die Verwendung der "Lazy Load"-Route.
Verwenden Sie einfach die Pfeilfunktion in Ihrer Komponenteneigenschaft, um die Importfunktion zurückzugeben:
Eine ähnliche Situation kann eintreten bei Vue-Bestandteile. Wir können einzelne Dateikomponenten auf diese Weise importieren:
const lazyComponent = () => import('pathToComponent.vue')
export default (
Komponenten: (lazyComponent )
)
// Eine andere Syntax
exportieren Standard (
Komponenten: (
lazyComponent: () => import('pathToComponent.vue')
)
)
Dank der "Lazy Load"-Funktion dieser Komponente wird sie nur bei Anforderung heruntergeladen. Wenn wir zum Beispiel eine Komponente mit v-if haben, wird sie nur angefordert, wenn die Komponente gerendert werden soll. Wenn also der v-if-Wert nicht wahr ist, wird die Komponente nicht geladen. Aus diesem Grund kann Lazy Importing auch verwendet werden für JavaScript Dateien.
Bonus: Bei der Verwendung von Vue CLI 3+ wird standardmäßig jede träge geladene Ressource vorgeholt!
Verwendung von transparenten Wrappern anstelle von Attributrequisiten
Betrachten Sie eine Komponente wie diese:
Ohne Probleme können wir es so verwenden:
oder
Es funktioniert, weil Vue ermöglicht es Ihnen, HTML-Attribute an die Komponente zu übergeben, auch wenn Sie sie nicht als Requisiten deklariert haben. Die HTML-Attribute werden auf das Wurzelelement der Komponente (in diesem Fall input) angewendet.
Das Problem tritt auf, wenn wir unsere Eingabekomponente erweitern wollen, denn sie könnte wie folgt aussehen:
Wenn Sie die Komponente auf diese Weise verwenden:
wird nicht so funktionieren, wie wir es wollen, weil der Typ und der Platzhalter auf div (Root-Element) angewendet werden und das macht keinen Sinn. Wir müssen uns also damit auseinandersetzen, denn wir wollen dem Eingabeelement unsere Attribute hinzufügen. Ihr erster Gedanke ist vielleicht: "Fügen wir die Requisiten hinzu, die wir brauchen!", und natürlich wird das funktionieren, aber... was, wenn wir Folgendes verwenden wollen Typ, Autovervollständigen, Platzhalter, Autofokus, deaktiviert, Eingabemodususw., dann müssen wir die Requisiten für jedes HTML-Attribut definieren. Ich persönlich mag diese langwierige Methode nicht, also lasst uns nach etwas Besserem suchen!
Wir können das gesamte Problem in nur zwei Zeilen.
Wir können verwenden v-bind="$attrs" und übergeben Sie Attribute direkt an <input> ohne große Mengen von Requisiten zu deklarieren. Denken Sie auch daran, die Option inheritAttrs: false um die Übergabe der Attribute an das Wurzelelement zu deaktivieren. Gehen wir noch einen Schritt weiter: Was ist, wenn wir dieser Eingabe Ereignis-Listener hinzufügen müssen? Auch hier könnte man mit Requisiten oder benutzerdefinierten Ereignissen arbeiten, aber es gibt eine bessere Lösung.
Es gibt eine neue berechnete Eigenschaft, die die Komponente für Hörer zurückgibt und den Eingabe-Hörer hinzufügt. Wir verwenden diese berechnete Eingabe, indem wir einfach schreiben v-on="Zuhörer".
Verwenden Sie den Watcher mit der Option immediate anstelle des erstellten Hooks und des Watchers zusammen
Oft holen wir einige Daten bei einem erstellten (oder montierten) Hook, aber dann müssen wir diese Daten bei jeder Änderung einer Eigenschaft holen, z. B. die aktuelle Seite der Paginierung. Einige neigen dazu, es so aufzuschreiben:
Natürlich, es funktioniert, aber... Es ist nicht der beste Ansatz, nicht einmal ein guter. Also, lassen Sie uns prüfen, wie wir dies umgestalten können, Ein Beispiel für einen nicht so schlechten Ansatz:
Die obige Version ist besser, weil eine weitere Methode nicht notwendig ist, wir haben nur eine Methode genannt, die aufgerufen werden soll, um watchedProperty zu ändern.
Wir sind den created-Hook losgeworden. Durch das Hinzufügen der Option "immediate" wird der Komponentenaufruf der fetchData-Methode unmittelbar nach dem Beginn der Beobachtung ausgeführt (ein wenig vor dem created-Hook und nach beforeCreated), sodass er anstelle des created-Hooks verwendet werden kann.
Vue.js Tipps Zusammenfassung
Diese Tipps werden Ihre Bewerbung nicht perfekt machen, aber wenn Sie sie befolgen, werden Sie schnell die Qualität Ihres Codes zu verbessern. Ich hoffe, Sie finden auch in den oben genannten Beispielen etwas Interessantes.
Beachten Sie, dass einige von ihnen für die Zwecke des Artikels vereinfacht wurden.