Der Unterschied zwischen Vue 2 und Vue 3
- 1. Das Prinzip der bidirektionalen Datenbindung ist unterschiedlich
Die bidirektionale Datenbindung von Vue2 wird realisiert, indem ein APIObject.definePropert() von ES5 verwendet wird, um die Daten zu kapern und sie mit dem Publish-Subscribe-Modus zu kombinieren.
Vue3 verwendet die Proxy-API von ES6, um Daten als Proxy zu verwenden.
Die Vorteile der Verwendung von Datenproxys in Vue3 sind wie folgt: 1) definePropert kann nur eine bestimmte Eigenschaft überwachen, nicht das gesamte Objekt. 2) Es kann für In-, Schließungs- und andere Inhalte speichern, um die Effizienz zu verbessern (binden Sie einfach das gesamte Objekt direkt)3 ) Sie können das Array überwachen, ohne dass spezielle Vorgänge am Array separat ausgeführt werden müssen. Vue3 kann die Änderung der internen Daten des Arrays erkennen
- 2. Ob die Fragmentierung unterstützt werden soll
Vue2 unterstützt keine Fragmente. Vue3 unterstützt Fragmentierung, was bedeutet, dass Sie mehrere Root-Knoten haben können
- 3. API-Typen sind unterschiedlich
Vue2 verwendet den Optionstyp API, und der Optionstyp API unterteilt verschiedene Attribute im Code: Daten, berechnet, Methode usw.
Vue3 verwendet eine synthetische API, und die neue synthetische API ermöglicht uns die Verwendung von Methoden zum Teilen. Im Vergleich zur alten API, die Attribute zum Gruppieren verwendet, wird der Code einfacher und übersichtlicher.
- 4 Die Definition von Datenvariablen und Methoden ist unterschiedlich
Vue2 fügt die Daten in Daten ein. Die in Vue2 definierte Datenvariable ist data(){}, und die Erstellungsmethode sollte in method:{} sein.
Vue3 muss eine neue setup()-Methode verwenden, die ausgelöst wird, wenn die Komponente initialisiert und erstellt wird. Verwenden Sie die folgenden drei Schritte, um reaktive Daten zu erstellen: 1) Reaktive Daten aus Vue importieren; 2) Verwenden Sie die Methode reactive(), um die Daten als reaktionsfähige Daten zu deklarieren; 3) Verwenden Sie die Methode setup(), um unsere reaktionsfähigen Daten zurückzugeben, also diese als Vorlage Es können reaktionsfähige Daten abgerufen werden.
- 5. Verschiedene Lebenszyklus-Hook-Funktionen
Lebenszyklus in Vue2: beforeCreate, bevor die Komponente erstellt wird; erstellt, nachdem die Komponente erstellt wird; beforeMount wird ausgeführt, bevor die Komponente auf der Seite gemountet wird; nachdem die gemountete Komponente auf der Seite gemountet wurde, wird sie ausgeführt, bevor die Komponente aktualisiert wird; beforeUpdate ist, bevor die Komponente aktualisiert wird; nach der Aktualisierung der aktualisierten Komponente
Lebenszyklus in Vue3: Setup beginnt mit der Erstellung von Komponenten; onBeforeMount wird ausgeführt, bevor die Komponente auf der Seite gemountet wird; onMounted wird ausgeführt, nachdem die Komponente auf der Seite gemountet wird; onBeforeUpdate erfolgt, bevor die Komponente aktualisiert wird; onUpdated erfolgt, nachdem die Komponente aktualisiert wird ;
Und der Vue3-Lebenszyklus muss vor dem Aufruf vorgestellt werden. Zusätzlich zu diesen Hook-Funktionen fügt Vue3 auch die Funktionen onRenderTracked und onRenderTriggered hinzu.
- 6. Vater und Sohn übergeben Parameter unterschiedlich
Vue2-Elternteil an Sohn, Requisiten verwenden; Sohn an Vater, Ereignis-Emitting-Ereignisse verwenden. In Vue2 wird this$emit aufgerufen und im Ereignisnamen und Objekt übergeben.
Vue3: Vom Vater zum Sohn verwenden Sie Requisiten; vom Sohn zum Vater verwenden Sie Emitting Events. Es gibt emit im Inhaltsobjekt des ersten Parameters in setup() in Vue3, dann müssen wir nur die Zerlegungsobjektmethode verwenden, um emit im zweiten von setup() empfangenen Parameter herauszunehmen, und dann können wir es frei verwenden die Setup-Methode.
- 7. Anweisungen unterscheiden sich von Slots
Durch die Verwendung von Slots in Vue2 können Slots direkt verwendet werden; v-for und v-if haben in Vue2 eine höhere Priorität als die v-for-Direktive, und es wird nicht empfohlen, sie zusammen zu verwenden.
Vue3 muss die Form von V-Slot verwenden; v-for und v-if in Vue 3 verwenden nur das aktuelle V-if als Beurteilungsaussage von v-for und stehen nicht in Konflikt miteinander;
Vue3 entfernt keyCode als v-on-Modifikator und unterstützt config.keyCodes natürlich nicht. Stattdessen wird der Schlüsselname als Ereignismodifikator verwendet, sodass Vue.config.keyCodes ebenfalls veraltet ist. vue2 uns Beim Abhören eines Schaltflächenereignisses , ist es möglich, eine Schaltfläche zu überwachen, indem nach dem Ereignis ein Schaltflächencode hinzugefügt wird --mulingyuer.com/archives/831/#;
Entfernen Sie den Modifikator v-on.native in Vue3 – die Funktion dieses Modifikators ist: Wenn Sie ein natives Ereignis im Stammelement einer Komponente direkt abhören möchten, müssen Sie den Modifikator .native von v-on verwenden, um ihn zu entfernen Vue3 Anschließend wird stattdessen das Ereignis, das die aktuelle Komponente tatsächlich auslöst (d. h. Komponentenereignis), in der neu hinzugefügten Option „emits“ definiert. Darüber hinaus fügt Vue jetzt alle Ereignisse, die nicht in der Option „Komponentenemissionen“ definiert sind, als native Ereignisse zum Stammelement der untergeordneten Komponente hinzu (es sei denn, inheritAttrs:false ist in den Optionen der untergeordneten Komponente festgelegt).
Der Filterfilter wurde in Vue3 entfernt. Er wird offiziell empfohlen. Wenn Sie einen Filter verwenden möchten, können Sie stattdessen die berechnete Eigenschaft und die Methodenfunktion verwenden. Wenn der globale Filter verwendet wird, stellt der Beamte auch eine Eigenschaft für die Migrationsreparatur bereit, diese wird jedoch nur für die Migration empfohlen. ---https://www.mulingyuer.com/archives/832/
- 8. Die Datei Main.js ist anders
In Vue2 können wir die Form eines Prototyps (Prototyp) für den Betrieb verwenden, und die Einführung ist der Konstruktor.
In Vue3 ist es notwendig, die Strukturform für den Betrieb zu verwenden, und die Fabrikfunktion wird eingeführt.
In der App-Komponente in Vue3 darf kein Root-Tag vorhanden sein.
- Erweiterte Lektüre https://worktile.com/kb/ask/19553.html
Eigenschaften der Setup()-Funktion
- Die Funktion setup() empfängt zwei Parameter: props, context (einschließlich attrs, slots, emit)
- Die Funktion setup() steht vor den beiden Hook-Funktionen von beforeCreated im Lebenszyklus
- Beim Ausführen von Setup wurde die Komponenteninstanz noch nicht erstellt (in setup (), dies ist kein Verweis auf die aktive Instanz, das heißt, es zeigt nicht auf die Vue-Instanz. Um unsere falsche Verwendung zu vermeiden, Vue ändert dies direkt in der Setup-Funktion auf undefiniert)
- Bei Verwendung mit Vorlagen muss ein Objekt zurückgegeben werden
- Denn in der Setup-Funktion reagieren Requisiten. Wenn eine neue Requisite übergeben wird, wird sie aktualisiert, sodass die ES6-Dekonstruktion nicht verwendet werden kann, da dadurch die Reaktionsfähigkeit der Requisite beseitigt wird. Wenn Sie eine Requisite dekonstruieren müssen, können Sie die verwenden Setup-Funktion torefs, um dies zu tun.
- Wenn Sie in setup() responsive Daten verwenden, müssen Sie diese über .value abrufen
- Wenn eine Eigenschaft des von setup() zurückgegebenen Objekts zurückgegeben wird und in der Vorlage darauf zugegriffen werden kann, wird sie automatisch auf den internen Wert erweitert. Es ist nicht erforderlich, .value an die Vorlage anzuhängen.
- Setup-Funktionen können nur synchron und nicht asynchron sein.