Im Jahr 2019 hat die Popularität des Vue-Frameworks enorm zugenommen. Die Anzahl der wöchentlichen Vue-Downloads hat sich verdoppelt: Im vergangenen Jahr waren es 600.000 und jetzt sind es 1,2 Millionen. Die lang erwartete dritte Version von Vue, die nächste Iteration des Frameworks, wird irgendwann im ersten Quartal 2020 erscheinen.
In Vue 3.0. viele neue Features sind geplant. Diese neuen Funktionen zielen darauf ab, die Effizienz von Programmierern zu steigern, die Syntax zu verbessern und die Systemleistung zu optimieren. Ich, als die Person, die Vue unterstützt, bin bestrebt, die Innovationen sofort nach ihrer Veröffentlichung zu nutzen.
Hier habe ich einige Tipps für diejenigen zusammengestellt, die sich auf die Einführung von Vue 3.0 vorbereiten möchten. Ich hoffe, dass diejenigen, die diese Tipps befolgen, sich sehr schnell an die neuen Bedingungen gewöhnen können.
1. Testen Sie die neuesten Vue 3.0-Funktionen.
Natürlich kann man sich nicht auf etwas völlig Unbekanntes vorbereiten. Aus diesem Grund ist es wichtig, sich mit den
Änderungen in Vue 3.0 vertraut zu machen. Folgendes empfehle ich besonders zu beachten:
- Mit der Kompositions-API können Sie Komponentencode besser organisieren.
- Die Unterstützung von TypeScript vereinfacht unter anderem das Schreiben von Code aufgrund von Eingabevervollständigungsmechanismen.
- Beschleunigtes Rendering durch zahlreiche Optimierungen des Frameworks zur Leistungssteigerung.
- Erhöhen der statischen Eigenschaften , sodass keine statischen Elemente mehr erstellt werden müssen.
- Das Arbeiten mit beobachtbaren Objekten mithilfe von Proxy-Objekten verbessert die Leistung und erweitert die Funktionen für die Arbeit mit reaktiven Objekten.
Außerdem rate ich Ihnen,
diese Leistung von Evan Yu in Bezug auf das Vue 3.0-Gerät anzusehen. Mit dieser Präsentation können Sie die Ideen, die hinter dem Framework stehen, besser verstehen.
Im Allgemeinen ist es auf jeden Fall wichtig zu wissen, was genau in der neuen Version des Frameworks erscheint und was sich ändern wird. Tatsache ist, dass dies Einfluss darauf haben kann, wie Programmierer die Struktur ihrer aktuellen Projekte planen. Vor allem dann, wenn es um neue Projekte geht. Die neuen Vue-Projekte, die derzeit erstellt werden und in naher Zukunft erstellt werden, sollten unter Berücksichtigung ihrer Übertragung auf Vue 3.0 erstellt werden. So wird ein solcher Übergang nicht zum Albtraum.
2. Beginnen Sie mit dem Erlernen von TypeScript
Eine der am häufigsten diskutierten Änderungen, die in Vue 3.0 erwartet werden. - Dies ist TypeScript-Unterstützung. Die Codebasis von Vue wird in TypeScript umgeschrieben. Dies gibt Entwicklern die Möglichkeit, Typhinweise und Tools zur Codevervollständigung in ihrer IDE zu verwenden.
Es ist wichtig zu beachten, dass dies nicht bedeutet, dass jeder unbedingt zu TypeScript wechseln muss. Vue-Projekte können weiterhin in JavaScript geschrieben werden. Die Verwendung von TypeScript erhöht jedoch die Geschwindigkeit und Qualität des Codes.
TypeScript (TS) ist eine Obermenge von JavaScript. Dies ist eine Sprache, deren Code in JavaScript (JS) kompiliert ist. Der Unterschied zwischen TS und JS besteht darin, dass Sie mit TypeScript Variablentypen angeben können. Fehler im Code, der mit Typen verknüpft ist, können in der Kompilierungsphase erkannt werden. Hier finden Sie einige Codefragmente aus der TypeScript-
Dokumentation . Einer von ihnen ist in TypeScript geschrieben, der andere in JavaScript.
Hier ist der JS-Code:
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Und hier ist der TS-Code:
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Beachten Sie, dass der TS-Code Angaben zu Entitätstypen enthält. Wenn Sie die TS-Funktion des
greeter nicht als Zeichenfolge, sondern beispielsweise als Array übergeben, wird beim Kompilieren von TS-Code eine Fehlermeldung angezeigt.
Wenn Sie TypeScript lernen möchten,
finden Sie hier einige gute Ressourcen. Tatsächlich gibt es eine Vielzahl von Informationsquellen zu TS. Darunter finden Sie genau das, was Sie brauchen.
3. Lernen Sie die Vue Pattern-Funktionen
Vue 3.0. Beinhaltet viele Verbesserungen beim Rendern. Dies umfasst das Erhöhen statischer Elemente, eine verbesserte Arbeit mit Rendering-Bäumen und sogar die Möglichkeit, eigene Rendering-Methoden zu schreiben.
Um das Beste aus Vue 3.0 herauszuholen, müssen Sie die Vue-Vorlagen unbedingt perfekt beherrschen. Die wahrscheinlich beste Quelle für das Wissen über Vorlagen ist natürlich die offizielle Vue-
Dokumentation .
Darüber hinaus kann ein Verständnis der Funktionsweise des Mechanismus zum Anheben statischer Elemente und der Anordnung von Block-Rendering-Bäumen dazu beitragen, die Effizienz beim Entwickeln eigener Vorlagen zu steigern. Das Auslösen statischer Elemente ist ein Mechanismus, dessen Funktion dazu führt, dass statische Elemente nicht jedes Mal neu erstellt werden, wenn die Seite angezeigt wird. Stattdessen werden ständig dieselben Elemente verwendet.
Die Rendering-Bäume, die aus Blöcken bestehen, vereinfachen die Überwachung reaktiver Objekte und reduzieren die Anzahl der Operationen, die während des Renderns ausgeführt werden.
Verwenden von Blöcken zum Bilden eines Renderbaums4. Beginnen Sie mit der Composition-API
Eine der heißesten (und umstrittensten) Innovationen von Vue 3.0. Ist die Composition API. Vue 2 verwendet jetzt die API-Optionen. Bei der Verwendung wird der Code nach Komponenten (Daten, Methoden, berechnete Eigenschaften usw.) verteilt.
Dank der neuen API wird der gesamte Code gruppiert. Dies verbessert die Lesbarkeit und vereinfacht das Extrahieren und Wiederverwenden von Funktionen.
API-ZusammensetzungNeue Mechanismen ermöglichen den direkten Zugriff auf das Vue-Kernreaktivitätssystem, mit dem Entwickler genau steuern können, was überwacht wird. Außerdem wird eine neue
setup() -Methode eingeführt, die unmittelbar nach
beforeCreate() und unmittelbar vor
created() aufgerufen wird.
Das Wichtigste ist, dass
die Composition-API jetzt verfügbar ist, sodass sie bereits in vorhandenen Projekten verwendet werden kann.
5. Aktualisieren Sie das Wissen zum Vue-Lebenszyklus
Im vorherigen Abschnitt war die Kompositions-API eine neue Möglichkeit, Komponenten Funktionen hinzuzufügen. Die Tatsache, dass die Lebenszyklusmethode der
setup() Komponente vor der
created() Methode aufgerufen wird, zeigt an, dass
setup() keinen Zugriff auf die Komponentendaten, ihre Methoden oder berechneten Eigenschaften hat.
Jetzt ist nicht ganz klar, wie die anderen neuen Funktionen von Vue 3.0 aussehen. wird auf den Komponentenlebenszyklus bezogen. Unabhängig davon sollten diejenigen, die Vue 3.0 möglichst bald produktiv einsetzen möchten, ihre Kenntnisse über die Vue-Lebenszyklusmethoden auffrischen. Es lohnt sich nämlich zu beachten, wann bestimmte Eigenschaften verfügbar sind, in welcher Reihenfolge die Methoden aufgerufen werden und so weiter.
Vue-LebenszyklusZusammenfassung
Daher möchte ich sagen, dass es sich einfach lohnt, jemanden zu lernen, der schnell neue Technologien erlernen möchte. Es lohnt sich, so viel Zeit wie möglich zu bezahlen. Das Vue-Entwicklungsteam hat der Community definitiv klar gemacht, was das Vue 3.0-Framework ist. wurde so entwickelt, dass der Übergang für diejenigen erleichtert wird, die bereits Vue verwenden. Daher wäre es falsch, es so zu sehen: "Vue 3 kommt heraus, ich werde auf die Veröffentlichung warten und dann werde ich es herausfinden." "Verstehen" ist besser im Voraus. Ich hoffe, dass das, was in diesem Artikel besprochen wurde, allen hilft, sich angemessen auf das Vue 3.0-Meeting vorzubereiten.
Sehr geehrte Leser! Was erwarten Sie von Vue 3.0?
