Ich habe versucht, von React.js zu Vue.js zu wechseln

Einführung

Vor ein paar Jahren war ich, wie viele andere auch, von der Einführung von Hooks und Funktionskomponenten der React.js-Frontend-Bibliothek „gehypt“. Sie boten eine völlig neue Art der Entwicklung, indem sie viel weniger Code schrieben als mit der Components-Klasse. Ich war wirklich süchtig, und zwar für eine ganze Weile.

Heute musste ich mich für das Vue.js-Framework entscheiden, um die Anforderungen eines brandneuen Kundenprojekts zu erfüllen. Und als ich am Ende dieses Projekts angelangt war, sagte ich mir, dass dies die Gelegenheit sei, Ihnen als neuem Benutzer dieses Frameworks Feedback zu geben!

Hat dieser Kompetenzzuwachs dem Bekanntheitsgrad von Vue.js gerecht?
Ist es heute besser, ein Frontend in Vue zu entwickeln als in React?

Das werden wir sehen!

Projektstart

Kesselplatte

Wer sagt, dass man ein Projekt starten will, sagt, dass man nach einem guten Standardmodell suchen muss, um uns Stunden oder sogar Tage mühsamer Konfiguration zu ersparen!
Ohne lange suchen zu müssen, erfüllt der Befehl npm create vue@latest weitgehend meine Anforderungen:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Die Typescript-Sprache wird bereits unterstützt, ein Routing-System und ein Store werden angeboten und es gibt sogar Platz für Unit- und End-to-End-Tests!

Standardmäßig ist der Vite-Bundler installiert. Was mir nicht missfallen soll!? Tatsächlich sind die Builds schnell und in den meisten Fällen funktioniert Hot Module Replacement (HMR) gut.

Ein wenig npm run dev, um den lokalen Dev-Server zu starten, und schon! Es läuft bereits im Browser!

Und für die Produktion? Geben Sie einfach den Befehl npm run build ein und das Projekt wird nach Überprüfung der Eingaben als statische Dateien in ein dist-Verzeichnis exportiert (sofern Typescript aktiviert wurde):

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Projektarchitektur

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

Auf der architektonischen Seite des Projekts finden wir insbesondere:

• die Datei index.html mit dem Tag
  auf dem unsere gesamte Vue-Anwendung aufgepfropft ist;
• die main.ts, mit der sukzessiven Erstellung der App-Komponente, des Routers und des Stores:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

• reine .ts-Dateien, um das Routing und den Store zu verwalten;
• einige Konfigurations- und Testdateien;
• ... und natürlich die *.vue-Dateien, unterschieden in Komponenten (die eher generischen und wiederverwendbaren Elementen entsprechen) und Ansichten (die eher hohen Ebenen entsprechen). Seiten)

Kurz gesagt, die Dateiarchitektur ist ziemlich einfach und der von React relativ ähnlich, auch wenn im Boilerplate viele Optionen aktiviert sind.
Bisher gibt es von React nichts wirklich Neues. Dann treten erhebliche Unterschiede auf!

Architektur einer Vue-Datei

Hier ist ein Codeausschnitt, der von der offiziellen Website inspiriert wurde. Es ändert lediglich die Farbe des Textes, wenn darauf geklickt wird, und zeigt gegebenenfalls den Satz „Der Text oben ist grün“ an, stellt jedoch eine typische Architektur von *.vue-Dateien dar:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Beachten Sie die Bindung von Ereignissen mit @click, die bedingte Anzeige mit v-if und die Bindung in CSS mit v-bind().

Der Code ist in drei sehr unterschiedliche Teile unterteilt:

• Skript: der Steuercode;
• Vorlage: die HTML-Struktur;
• Stil: das CSS-Stylesheet.

Und diese drei Teile vermischen sich nie ?.
Dies hat mehrere Vorteile, die ich während meiner Erfahrung im Kundenprojekt persönlich erfahren habe:

• Die HTML-Struktur ist klar, fest und in einem sehr deklarativen Stil – alles ist da, sogar die bedingt angezeigten Tags;
• Der Logikteil ist gut vom Anzeigeteil getrennt;
• Sie können reines CSS an Ort und Stelle schreiben, direkt mit der Komponente verknüpft und ohne die Installation von Bibliotheken von Drittanbietern;
• Trotz der Trennung des Stils können Sie weiterhin Variablen in das CSS einfügen.

Mit dem Scoped-Tag im

Kleiner Nachteil: a priori gibt es kein automatisches CSS-Polyfill. Daher sollten Sie lieber einen Buchladen wie vue-emotion anstreben.

Aus meiner Sicht finde ich, dass diese Art von „All-in-JS“-Bibliothek ein wenig die von Vue angebotene Architektur sprengt, und offensichtlich sind browserspezifische CSS-Eigenschaften heutzutage viel seltener. Der

Kurz gesagt, ich fand diese All-in-One-Architektur sehr angenehm, aber mit klar getrennten Abschnitten. Dadurch können Sie sauberen Code behalten, aber auch prägnanter. Tatsächlich ermutigt Sie das gleichzeitige Vorhandensein der drei Abschnitte „Geschäftslogik/Anzeige/Stil“ häufig dazu, Ihren Code in kleinere Module und damit in kleinere Dateien aufzuteilen.

Was wäre, wenn wir uns nun die Vue.js-API selbst genauer ansehen?

Die Vue.js-API

Hier werde ich Ihnen keine erschöpfende Liste aller Elemente der Vue.js-API geben, auf die ich gestoßen bin, sondern nur einige sehr spezifische, die meiner Meinung nach ziemlich repräsentativ für die Logik von Vue sind.

Die (neu)berechneten Werte

Beginnen wir mit einer bekannten Operation im React-Universum: Berechnen Sie ein HTML-Rendering (oder eine Variable) nach einer Datenaktualisierung intelligent neu.
Es gibt die sehr intuitive Funktion „computed()“, die von einem Speichersystem (einer Art „Cache“) profitiert, um zu vermeiden, dass der Ausgabewert jedes Mal neu berechnet wird:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Hier wird die magicNumber nur berechnet, wenn sich der Wert von pushBtn ändert. Und es ist nachweisbar: Die Meldung „erneut berechnet!“ Wird nur in der Konsole angezeigt, wenn auf eine andere Schaltfläche geklickt wird.
Im Gegensatz zu React müssen die zu überwachenden Variablen in dieser Funktion also nicht explizit angegeben werden.

In gleicher Weise finden wir auch watch und watchEffect, mit denen Sie jeweils auf Änderungen aller oder eines Teils der Eigenschaften der Komponente reagieren können, wie zum Beispiel useEffect in React:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Nur ​​ein Klick auf die Zahlenmodifikatorschaltfläche erhöht den „Uhren“-Zähler.
Mit watch() können wir dann jedes Mal einen Rückruf auslösen, wenn sich bestimmte Variablen ändern.

Die Stärke dieser Funktion liegt in der tiefgehenden Analyse von Variablenmodifikationen: Vue erkennt Veränderungen sogar tief innerhalb eines Unterobjekts!

Zwei-Wege-Synchronisation

Das Deklarieren und Übergeben einer Eigenschaft von einer übergeordneten Komponente an eine untergeordnete Komponente ist ein ziemlich wiederkehrender Vorgang. Es ist auch möglich, diesen Wert zwischen dem Kind und dem Eltern zu synchronisieren, beispielsweise bei der Eingabe eines Formulars.

Anstatt wie hier sowohl eine Eigenschaft als auch einen ereignisbasierten Update-Rückruf zu verwalten:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

… es ist möglich, stattdessen das Makro defineModel zu verwenden, was das Schreiben vereinfacht:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Viel kürzer! ? Außerdem hätte ich, da ich nur ein Modell hatte, sogar darauf verzichten können, es zu benennen!

Und mit den Eltern:

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

Die for-Schleife

Als ich mit dem V-For fortfuhr, nachdem ich das V-Modell gesehen hatte, wurde mir klar, dass Vue.js begann, durch impliziten Code viel „Magie“ einzuführen:

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App); // composant racine

app.use(createPinia()); // store
app.use(router); // routage des pages front

app.mount('#app');

Und das Ergebnis:

Wie zu erwarten ist, ermöglicht die v-for-Anweisung daher die automatische Wiederholung eines Teils eines HTML-Musters (hier des

-Tags) für jedes Element eines Iterables.

Auf der React-Seite wäre es notwendig gewesen, JSX zu verwenden, um jedes Element selbst zu erstellen, wodurch der Code mit zunehmender Komponente weniger lesbar wäre:

<script setup>
  import { ref } from 'vue';

  const color = ref('green');

  function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green';
  }
</script>

<template>
  <p class="main-text">
    Cliquez sur ce texte pour changer de couleur.
  </p>
  <p v-if="color === 'green'">Le texte ci-dessus est vert.</p>
</template>

<style scoped>
  .main-text {
    color: v-bind(color);
  }
</style>

Ich persönlich bevorzuge die Struktur von Vue im Hinblick auf die Sauberkeit des Codes, solange kein Debug erforderlich ist. ?
Und da wir gerade über Debugging sprechen, was ist mit den Vue-Ökosystem-Tools?

Entwicklungstools

Hier sind 3 Tools, die meine Aufmerksamkeit bei der Entwicklung meines Projekts erregt haben.

VSCode-Erweiterung: Vue Official

Ich fange mit dem Offensichtlichen an, aber ja, es gibt eine Erweiterung für VSCode Vue (und andere IDEs), die Syntaxhervorhebung, automatische Vervollständigung, Snippets usw. hinzufügt. Ein Muss!

Allerdings sind mir einige Instabilitäten bei der Farbgebung und der Autovervollständigung aufgefallen, die manchmal etwas kapriziös waren, wobei ich eine größere Stabilität auf der React-Seite zu schätzen wusste.

Vue.js Devtools

Wie das Browser-Plugin React Developer Tools gibt es auch das Devtools-Plugin Vue.js, das, wie ich zugeben muss, bereits sehr gut ausgestattet ist:

Es gibt 4 Registerkarten:

• Komponenten, wo wir den Zustand der Komponenten beobachten, aber auch ändern können;
• Zeitleiste, mit der Sie Ereignisse und Komponenten-Rendering-Zeiten aufzeichnen können, was tatsächlich einer Version der Registerkarte „Leistung“ des Browsers entspricht, sich jedoch auf Vue konzentriert;
• Pinia, mit dem Sie die Zustände des Standardspeichers direkt beobachten und ändern können?, eine vorgefertigte Integration, die ich besonders willkommen fand;
• Routen, wo Sie die verschiedenen Straßen und ihre Aktivität auflisten können – das ist eine Registerkarte, die ich bei meinem mittelgroßen Projekt etwas unhandlich fand (vor allem, da die Informationen mit denen der „Komponenten“ nicht sehr redundant sind). " Registerkarte, die sich jedoch bei komplexen Routings als sehr nützlich erweisen kann.

Kurz gesagt, zum Debuggen gibt es alles, was Sie brauchen, und noch mehr!

Vuetify

Fast ohne Überraschung (aber dennoch mit Wert!) gibt es auch eine UI-Bibliothek für Vue, die Googles Material Design implementiert und auch eine Liste von Standardsymbolen bereitstellt: Vuetify.

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Dies spart viel Zeit beim Projektstart oder bei Projekten, die nicht zu viele grafische Anpassungen erfordern.

Aber wie immer empfehle ich, bei dieser Art von High-Level-Bibliothek die Rendering-Leistung im Auge zu behalten. Die Konfigurationskapazität einer Bibliothek wird oft woanders bezahlt!

Abschluss

Was können wir über diese Erfahrung bei der Migration von React zu Vue sagen?

Zunächst einmal würde ich aus Code-Sicht im Vergleich zu React sagen, dass die Vue-Bibliothek wie folgt aussieht:

• strukturierter;
• deklarativer ;
• prägnanter.

Dank seines Codes, der mehr in JSX geschrieben ist, finde ich jedoch, dass React viel interoperabler, programmatischer und expliziter als Vue bleibt und eine bessere Linter-Stabilität aufweist.

In Sachen Entwicklungsumgebung und Community hat Vue für mich alle Karten in der Hand, um eine effiziente Entwicklung bis hin zur Produktion sicherzustellen.

Ist dieser Kompetenzzuwachs auf Vue seinem Ruf gerecht geworden? Ich würde ja sagen. Ich fand die Lernkurve effektiv und werde mich mit Vue weiterentwickeln, wenn sich die Gelegenheit ergibt.

Abschließend: Ist es heute besser, ein Frontend in Vue zu entwickeln als in React?
Aus ganz persönlicher Sicht glaube ich nicht. Auch wenn Vue und React jeweils leicht unterschiedliche Anwendungsfälle haben, setze ich lieber auf ein zuverlässiges Typisierungssystem und flexibleren Code mit React. Aber vielleicht werden die nächsten Versionen von Vue und ihre Tools meine Meinung ändern?

Und Sie, was ist Ihr Feedback?

Das obige ist der detaillierte Inhalt vonIch habe versucht, von React.js zu Vue.js zu wechseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!