8 Tipps für Vue, die Sie nach dem Lesen lernen werden

1. Verwenden Sie immer :key in v-for

Die Verwendung des Schlüsselattributs mit der v-for-Direktive ist erforderlich, um Ihr Programm konstant und vorhersehbar zu halten, wenn Sie Daten bearbeiten müssen. Auf diese Weise kann Vue den Komponentenstatus verfolgen und über einen konstanten Verweis auf die verschiedenen Elemente verfügen. Ohne Schlüssel bei der Verwendung von Animationen oder Vue-Übergängen versucht Vue einfach, das DOM so effizient wie möglich zu gestalten. Dies kann dazu führen, dass die Elemente in v-for in der falschen Reihenfolge erscheinen oder sich unvorhersehbar verhalten. Wenn wir eindeutige Schlüsselverweise für jedes Element haben, können wir besser vorhersagen, wie genau unsere Vue-Anwendung mit DOM-Operationen umgehen wird.

2. Verwenden Sie CamelCase, um Requisiten zu deklarieren, und verwenden Sie Bindestriche, um auf Requisiten in Vorlagen zuzugreifen

Die beste Vorgehensweise besteht darin, einfach die Konventionen der einzelnen Sprachen zu befolgen. In JS sind CamelCase-Deklarationen der Standard, in HTML ist es der Bindestrich. Vue bietet bereits eine Konvertierung zwischen CamelCase- und DashCase-Deklarationen, sodass wir uns um nichts weiter kümmern müssen, als sie tatsächlich zu deklarieren.

3. Verwenden Sie Bindestriche in Veranstaltungsnamen

Beim Ausgeben benutzerdefinierter Ereignisse verwenden Sie am besten einen Bindestrich im Namen, da wir in der übergeordneten Komponente dieselbe Syntax verwenden, um auf das Ereignis zu warten. Um die Konsistenz zwischen unseren Komponenten zu gewährleisten und Ihren Code lesbarer zu machen, verwenden Sie bitte an beiden Stellen Bindestriche.

4. Funktionale Komponenten

Funktionale Komponenten sind zustandslos, können nicht instanziiert werden und haben weder einen Lebenszyklus noch Methoden. Das Erstellen einer funktionalen Komponente ist ebenfalls sehr einfach. Fügen Sie der Vorlage einfach eine funktionale Deklaration hinzu. Es eignet sich im Allgemeinen für Komponenten, die nur von Änderungen in externen Daten abhängen. Aufgrund seines geringen Gewichts wird auch die Rendering-Leistung verbessert. Alles, was eine Komponente benötigt, wird über den Kontextparameter übergeben. Es handelt sich um ein Kontextobjekt. Informationen zu spezifischen Eigenschaften finden Sie in der Dokumentation. Hier ist „props“ ein Objekt, das alle gebundenen Eigenschaften enthält.

5. Komponenten mit gleicher Route wiederverwenden

Entwickler stoßen häufig auf Situationen, in denen mehrere Routen zur gleichen Vue-Komponente führen. Das Problem besteht darin, dass Vue aus Leistungsgründen gemeinsam genutzte Komponenten standardmäßig nicht erneut gerendert. Wenn Sie versuchen, zwischen Routen zu wechseln, die dieselbe Komponente verwenden, ändert sich nichts. Wenn Sie diese Komponenten dennoch erneut rendern möchten, können Sie dies tun, indem Sie in der Router-View-Komponente eine :key-Eigenschaft angeben.

6. $createElement

Im Allgemeinen hat jede Vue-Instanz Zugriff auf die Methode $createElement, um virtuelle Knoten zu erstellen und zurückzugeben. Sie können dies beispielsweise ausnutzen, um Markup in einer Methode zu verwenden, die über die v-html-Direktive übergeben werden kann. In einer Funktionskomponente kann auf diese Methode als erstes Argument in der Renderfunktion zugegriffen werden.

7. Verwenden Sie JSX

Da Vue CLI 3 standardmäßig die Verwendung von JSX unterstützt, können Sie Ihren Code jetzt mit JSX schreiben. Wenn Sie Vue CLI 3 noch nicht verwenden, können Sie babel-plugin-transform-vue-jsx verwenden, um JSX-Unterstützung zu erhalten.

8. Scoped Slots trennen Benutzeroberfläche und Geschäftslogik

Wir möchten häufig die Geschäftslogik einer Komponente wiederverwenden, aber nicht die Benutzeroberfläche der Komponente. Wir können bereichsbezogene Slots verwenden, um die Benutzeroberfläche und die Geschäftslogik zu trennen. Die allgemeine Idee von Scoped Slots besteht darin, die DOM-Struktur dem Anrufer zu überlassen und sich nur auf die Geschäftslogik innerhalb der Komponente zu konzentrieren. Schließlich werden Daten und Ereignisse über :item = "item" zur Verarbeitung und zum Aufruf an die übergeordnete Komponente übergeben, wodurch die Trennung von Benutzeroberfläche und Geschäftslogik realisiert wird. In Kombination mit der Rendering-Funktion kann der Effekt renderfreier Komponenten erzielt werden.

Oben finden Sie den detaillierten Inhalt von 8 kleinen Tricks von Vue, die Sie nach dem Lesen lernen werden. Weitere Informationen zu Vue-Kenntnissen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!