Von einer JavaScript-Bibliothek zu einem Framework ist die Reise von Vue beeindruckend, besonders wenn man bedenkt, wie es immer noch seine leichte Natur beibehält. Es gibt mehrere Funktionen, die Vue3 bietet, darunter Pinia, das eine einfachere Zustandsverwaltung ermöglicht, sowie eine Build-Toolchain, die auf Vite funktioniert. Egal, ob Sie Ihre Apps auf Vue3 aktualisieren oder einfach nur mit dem Framework experimentieren möchten, wir haben hier alles Wissenswerte über Vue3 zusammengestellt!
Was ist Vue3?
Bevor wir auf die Änderungen eingehen, die Sie in Vue3 sehen werden, werfen wir zunächst einen Blick darauf, was Vue.js und seine Kernkomponenten sind:
Sehen
Vue.js ist ein Open-Source-Frontend- JavaScript-Framework , mit dem Benutzeroberflächen erstellt werden können. Das Framework bietet einen deklarativen und komponentenbasierten Codierungsansatz, der die schnelle Entwicklung von Benutzeranzeigen unterstützt. Es kann verwendet werden, um einfache oder komplizierte Schnittstellen zu entwickeln und basiert auf HTML, CSS und JavaScript nach Industriestandard. Die Gründe für die Popularität von Vue.js und die große Benutzerbasis von Vue.js sind seine programmiererfreundliche Syntax, Benutzerfreundlichkeit und gut definierte Dokumentation.
Wie oben erwähnt, basiert Vue.js auf zwei Kernmerkmalen:
Deklaratives Rendering ermöglicht es dem Benutzer, die HTML-Ausgabe abhängig vom JavaScript-Status deklarativ zu definieren. Vue.js erweitert normales HTML mit Hilfe der Template-Syntax.
Reaktivität – Vue.js überwacht aktiv den JavaScript-Status und aktualisiert das DOM schnell, wenn es geändert wird.
Vue3.0
Ingenieure, die Vue 2 zum Programmieren verwenden, müssen jetzt auf Vue3 aktualisieren. Dies liegt daran, dass es über neue Funktionen verfügt, die das Entwerfen lesbarer, konsistenter Komponenten viel einfacher und besserer Methoden zum Organisieren unserer Anwendungen machen. Vue3 ist benutzerfreundlicher, kürzer und einfacher zu warten. Einige der bemerkenswerten Funktionen von Vue3 sind Teleport, Fragmente und mehrere V-Modelle.
Die neueste Version hat auch die Filter abgeschafft und verfügt über zustandsgesteuerte CSS-Variablen sowie eine experimentelle Suspense-Funktion. Es hat auch Änderungen der Lebenszyklusbenennung und Änderungen einzelner Dateikomponenten.
Wurde Vue3 veröffentlicht?
Die neueste verfügbare Version von Vue – Vue3 – wurde ursprünglich Mitte 2018 angekündigt und im September 2020 offiziell veröffentlicht. Vue3.0 wurde am 7. Februar 2022 zur offiziellen Standardversion des progressiven Javascript-Frameworks erklärt.
Was ist neu in Vue3?
Die aufregendsten Änderungen, auf die Sie sich in Vue3 freuen können, sind:
Bereitstellen/injizieren
Vue 2 ermöglichte es Benutzern, Daten wie Strings, Arrays, Objekte und mehr durch Requisiten im Code zu übergeben. Solche Daten könnten leicht von einem übergeordneten Element an seine untergeordneten Elemente weitergegeben werden. Die Verwendung von Requisiten machte es jedoch schwieriger, Daten vom übergeordneten Element an ein tief verschachteltes untergeordnetes Element zu senden. Infolgedessen mussten Entwickler den Vuex Store und Event Hub verwenden. Vue 2.2.0 enthielt auch Provide/Inject, aber es wurde nicht empfohlen, es im allgemeinen Programmcode zu verwenden.
Durch die Verwendung der verbesserten Bereitstellungs-/Injektionskombination in Vue3 können wir Daten jedoch schneller und sauberer übergeben. Wie der Name schon sagt, verwenden wir to deploy, um Daten von einem übergeordneten Element für alle untergeordneten Komponenten zugänglich zu machen, unabhängig davon, wie tief diese untergeordneten Elemente verschachtelt sind. Hier können wir Bereitstellungen als Objekte oder als Funktionen verwenden.
Teleportieren
Basierend auf der Logik der App, die Sie erstellen möchten, werden Ihre Komponenten möglicherweise an Stellen angezeigt, die sich von den Stellen unterscheiden, an denen sie angezeigt werden sollen. Beispielsweise möchten Sie vielleicht ein Popup erstellen, das erscheinen und den gesamten Bildschirm einnehmen soll. Um dies zu überwinden, können wir das Positionsattribut solcher Komponenten in CSS verwenden, aber mit Vue3 können Entwickler auch Teleport verwenden.
Mit Teleport können Programmierer ein Element aus seinem ursprünglichen Container nehmen, in den es eingewickelt ist, und es zu einer bereits vorhandenen Komponente auf der Seite verschieben, auf der es verwendet wird. Beispielsweise können Sie ein Header-Element aus dem #app-Div in den Header verschieben. Denken Sie daran, dass Sie Teleport nur verwenden können, um Elemente in Codekomponenten zu verschieben, die außerhalb des Vue DOM existieren.
Fragmente
Es ist schwierig, in Vue 2 mehrere Stammkomponenten in einer Dateivorlage zu haben. Programmierer begannen, alle Komponenten in einer übergeordneten Komponente einzuschließen, um das Problem zu lösen. Manchmal müssen Programmierer ein Element rendern, ohne dass ein Container darum gewickelt ist. Ingenieure können jetzt dank Fragments, einer Funktion, die Vue3 hinzugefügt wurde, zahlreiche Elemente in ihrer Stammvorlagendatei haben.
Globale Vue-API
In der main.js-Datei einer Vue-App könnten Sie häufig die Vue.component oder Vue.use gefunden haben. Sie werden als globale APIs bezeichnet, und es gibt viele solcher Methoden in Vue 2. Wenn Sie hier mehrere Instanzen Ihrer App haben, werden alle auf Vue platziert. Es ist schwierig, bestimmte Funktionen auf eine einzelne Anwendungsinstanz zu beschränken.
Vue3 löst dieses Problem durch die Einführung einer neuen globalen API namens createApp. Mit dieser Methode können Sie eine neue Instanz einer Vue-Anwendung erhalten. Alle Vue 2.x-bezogenen APIs werden auf separate App-Instanzen übertragen. Dadurch kann jede Instanz Ihrer Anwendung exklusive Funktionen haben, ohne andere bereits verwendete Instanzen zu stören.
Ereignis-API
Neben der Verwendung des Vuex Store ist die Verwendung von Event Bus eine der beliebtesten Methoden, die Programmierer zum Übergeben von Daten zwischen Elementen verwendet haben, die keinen Eltern-Kind-Kontext teilen. Codes wie $on, $off und $once wurden jedoch alle in Vue3 gelöscht. Auf $emit kann jedoch weiterhin zugegriffen werden, da untergeordnete Elemente Ereignisse an ihre übergeordneten Elemente ausgeben müssen. Eine Lösung hierfür wäre die Verwendung von „provide/inject“.
Vite-basierte Build-Toolchain
Vite wurde von Evan You, dem Schöpfer von Vue, entworfen und ist eine erstklassige Vue SFC-Support-Toolchain, die leicht und schnell zu erstellen ist. Vite ist jetzt der Motor hinter der standardmäßigen Vue3-Build-Konfiguration. Der Modul-Bündeler @vue-cli/service , der auf Webpack aufbaut, umschließt Ihre gesamte Vue-Anwendung beim Start, bei Hot-Reloads und bei der Kompilierung. Vite hingegen übernimmt die ES-Import-Syntax aus Ihrem Programmcode und erlaubt dem Browser, jeden Import zu analysieren, bevor er eine HTTP-Anfrage sendet.
Der Wechsel erfolgt vor allem aus Geschwindigkeitsgründen. Der Server startet sofort, da er native Browserunterstützung für JavaScript-Komponenten verwendet und viel schneller ist.
Zusammensetzungs-API-Syntax
Die Options-API wurde zum Erstellen von Elementzuständen und Logik verwendet. Die Composition API wurde von Vue3 als Ersatz dafür gestartet. Es ist lediglich eine Sammlung von APIs, die es uns ermöglicht, Vue-Elemente zu erstellen, ohne Optionen zu definieren, indem wir importierte Methoden verwenden.
Die Kompositions-API enthält die folgenden APIs:
Reaktivitäts-API – Zum Beispiel ref() undreaktive(). Es kann damit direkt reaktiven Zustand, berechneten Zustand und Beobachter aufbauen.
Lifecycle-Hooks – Zum Beispiel onMounted() und onUnmounted(). Wir können uns mit Lebenszyklus-Hooks in den Elementlebenszyklus einklinken.
Abhängigkeitsinjektion – Zum Beispiel „provide()“ und „inject()“. Die Verwendung des Abhängigkeitsinjektionssystems von Vue mit Reaktivitäts-APIs wird durch die Abhängigkeitsinjektion ermöglicht.
Vorteile der Verwendung von Kompositions-APIs
Die Hauptvorteile der Verwendung von Kompositions-APIs gegenüber der Options-API sind:
- Mit Vue3 ist kein Element mehr notwendig, um einen reaktiven Zustand zu erzeugen.
- Beim Hinzufügen zahlreicher reaktiver Attribute kann die Einrichtung in Vue.js-Elementen aufgebläht werden. Aus diesem Grund kann es sinnvoll sein, diese reaktiven Variablen in separaten Javascript-Dateien abstrahieren zu lassen.
- Der Hauptvorteil der Composition API besteht darin, dass sie es ermöglicht, eine klare, effektive Logik in Form von Composable-Methoden wiederzuverwenden. Es behandelt alle Probleme mit Mixins, der Hauptmethode zur Wiederverwendung von Logik in der Options-API.
- Sie können Code in der Kompositions-API mit vollständigem Typrückschluss eingeben.
- Die Programme, die Sie in der Kompositions-API schreiben, sind effizienter, und die Namen der Variablen können kleiner gemacht werden. Dies reduziert den Aufwand.
- Mit der Composition API können Sie Ihren Programmcode besser teilen.
Pinia
Pinia ist ein leichtgewichtiges Zustandsverwaltungstool für Vue.js. Es ermöglicht uns, einen Zustand zwischen Elementen und Seiten zu teilen. Es erstellt ein benutzerfreundliches, vollständig typisiertes Zustandsverwaltungs-Framework unter Verwendung des neuen Reaktivitätskonzepts in Vue3. Dies ist jetzt die neue Standard-Zustandssteuerungsbibliothek von Vue3.
Pinia diente zunächst als Studie über das Potenzial von Vuex. Lange Zeit war Vuex das vorgeschlagene Zustandsverwaltungssystem für Vue, aber mit Vue3 ist Pinia das empfohlene System zur Verwaltung von Zuständen in der offiziellen Dokumentation. Derzeit befindet sich Vuex im Wartungsmodus. Obwohl es weiterhin funktioniert, werden keine neuen Funktionen hinzugefügt. Die Verwendung von Pinia wird für neue Apps empfohlen.
Warum Pinia?
Pinia ist sehr leicht und kommt auf nur 1 KB. Darüber hinaus lässt es sich in die Vue.js-Entwicklungstools integrieren, um Ihre Programmiererfahrung in Vue 2 und Vue3 zu verbessern. Da Pinia alle Ihre Datentypen ableitet, kann es Ihnen auch eine vollständige und präzise automatische Vervollständigung in Javascript anbieten. Pinia ist außerdem modular aufgebaut, benutzerfreundlich und erweiterbar. Insgesamt wirkt Pinia leicht, unkompliziert und geradlinig. Es ähnelt stark dem Umgang mit Elementen und enthält alle Werkzeuge, die für die dynamische Programmierung in Vue3 erforderlich sind.
Wird Vue 2 veraltet sein?
Das letzte kleinere Update für Vue 2 war Vue 2.7, das im Juli 2022 veröffentlicht wurde. Vue 2 befindet sich derzeit im Wartungsmodus. Obwohl keine zusätzlichen Funktionen ausgeliefert werden, erhält es dennoch wichtige Fehlerbehebungen und Sicherheitspatches für 18 Monate. Bis Ende 2023 wird Vue 2 veraltet sein.
Migration von Vue 2
Basierend auf Ihrer Software lohnt sich ein Umstieg auf Vue3 möglicherweise nicht, wenn Sie an einem sehr großen Projekt mit Vue 2 arbeiten. Verwenden Sie Vue3, wenn trotz aller Optimierungsbemühungen Effizienzprobleme bestehen bleiben.
Ob Sie Ihre Anwendung auf Vue3 migrieren möchten oder nicht, hängt von ihrer Größe und Komplexität ab. Der Großteil der Syntax und Techniken in Vue 2 sind die gleichen wie in Vue3. Wenn Sie jedoch einige der oben genannten Änderungen verwenden möchten, wäre eine Migration eine bessere Idee.
Vue.js im AppMaster-Projekt
Die AppMaster-Plattform verwendet das VueJS-Framework, oder besser gesagt die dritte Version des Frameworks, um eine Frontend-Anwendung für unsere Benutzer zu erstellen. Vue 3 wird verwendet, um Admin-, Panel- und Kundenportale zu erstellen, und die gesamte Benutzeroberfläche von AppMaster Studio wird tatsächlich auch mit dem VueJS-Framework erstellt.
Um unser Produkt schnell und effizient entwickeln zu können, verwenden wir einen speziellen Ansatz namens Micro-Frontends oder Frontend-Microservices; Beispielsweise ist jeder Datenmodell-Editor und jeder Geschäftsprozess-Editor eine vollständig separate Front-End-Anwendung in unserer Plattform. Dadurch können wir aus Sicht des Entwicklungsteams sehr schnell und unabhängig entwickeln, was die Gesamtgeschwindigkeit unseres Produkts erhöht. All diese Vorteile können unsere Kunden mit unseren Anwendungen nutzen.
In Zukunft werden wir zusätzlich zum SPA-Einzelseitenanwendungsmodus den SSR-Modus (Server-Side Rendering) hinzufügen, der es unseren Kunden ermöglicht, nicht nur Admin-Panels und benutzerdefinierte Portale, sondern auch voll funktionsfähige Websites mit sehr vielen Funktionen zu erstellen hohe SEO-Optimierung.
Über No-Code
Eines der Schlüsselelemente, das die Demokratisierung der Codierung beeinflusst, ist der No-Code-Entwicklungsansatz . Heutzutage kann eine größere Anzahl von Menschen im Allgemeinen ohne Codierung auf Programmierung zugreifen. Es vereinfacht das Webdesign, die Entwicklung mobiler Anwendungen und die reaktionsschnelle Webentwicklung.
AppMaster gehört zu den Anwendungen, die zur automatischen Erstellung von Quellcode verwendet werden können. Sie können den Code jederzeit einsehen und überprüfen. Mit AppMaster haben Sie die Möglichkeit, Projektinformationen mithilfe der Computersprache anzupassen. Wir lassen die Leute den Code auch exportieren, wenn sie wollen. Dies ist eine Garantie dafür, dass Sie die vollständige Kontrolle und das Eigentum über die Anwendung haben, an der Sie mit AppMaster arbeiten.
Schlussfolgerungen
Wenn Sie eine detailliertere Erklärung, wie sich Vue3 von Vue 2 unterscheidet, zusammen mit Code-Snippets wünschen, können Sie die offizielle Vue.js-Dokumentation durchgehen. Wir haben die meisten der wichtigsten Änderungen erwähnt, die Sie kennen sollten. Es ist wichtig, dass Sie sich über Aktualisierungen von Vue3 im Klaren sind, wenn Sie daran interessiert sind, Anwendungen mit diesem Framework zu erstellen.
