Der Vergleich der Champions: Angular gegen Vue

Einrichten eines Projekts

Der schnellste Weg zum Start einer Projekt ist durch die Verwendung der CLI, bereitgestellt von den Autoren der Frameworks. Beide bieten einen ziemlich guten Service, allerdings gibt es einige Unterschiede, z.B., Vue bietet mehr Optionen, so dass Sie ein Projekt von Anfang an auf Ihre Bedürfnisse zuschneiden können. Sie können die Vue-Version, ob Sie Routing verwenden müssen. Typescript, CSS-Präprozessoren oder einen Linter einrichten. Außerdem können Sie entscheiden, ob Sie Tests (Unit oder E2E) einrichten möchten.

Angular wird mit einem Generator geliefert, mit dem Sie Komponenten, Dienste, Schnittstellen und Direktiven direkt von der Konsole aus erstellen können, was meiner Erfahrung nach sehr praktisch ist, da Sie keine Ordner, Dateien und redundanten Code von Hand zu erstellen, insbesondere wenn Sie z.B. das MVC-Muster verwenden. Typescript wird standardmäßig mit Angular und drängt Sie gewissermaßen dazu, es zu benutzen. Wenn Sie es noch nicht getan haben, finden Sie hier eine praktische Einführung, warum Sie es ausprobieren sollten - sehen Sie es sich an hier.

Am Anfang, Angular's CLI fragt Sie nur nach Routing oder bevorzugten CSS-Präprozessoren, was im Vergleich zu Vuelässt Ihnen nicht viel Spielraum, um über die Struktur und den Stil Ihrer Anwendung zu entscheiden. Wenn Sie sich jedoch an die Konvention halten, die sie zu verwenden vorgibt, wird die Befehlszeilenschnittstelle Sie den ganzen Weg über begleiten.

Struktur des Projekts

Vue verwendet SFC (Single File Components), was es neuen Entwicklern sehr einfach macht, mit einem Framework zu beginnen und sich in den Code einzuarbeiten.

Richtlinien

Vue wird auch mit Direktiven wie "v-if, v-for" ausgeliefert, die sehr intuitiv zu benutzen sind, da sie fast eine Kopie der Angular ein. Vue verwendet dieselbe Konvention für die zweiseitige Datenbindung (nur mit dem Präfix "v-" in "v-model") und fügt das @/v-on hinzu, das anzeigt, dass wir auf etwas reagieren. Angular trennt dies durch die Angabe der Richtung, in die wir gehen, indem wir Klammern für die Ereignisbindung und eckige Klammern für die Eigenschaftsbindung verwenden, d. h. ,`(change), [ngStyle], [(ngModel)]`.

Unter VueDie Struktur selbst ist einfach, es besteht keine Notwendigkeit, separate Dateien für Stylesheets und Logik zu erstellen, so dass alles übersichtlich und leicht zugänglich ist. Natürlich, Vue wird mit einem Styleguide geliefert, in dem Sie empfohlene Regeln finden, die Sie bei der Erstellung eines Projekts befolgen sollten; es gibt jedoch nur wenige, die obligatorisch sind. 

Veranstaltungen

In diesem Fall, Vue bietet eine weitere praktische Lösung: Um ein Ereignis von der untergeordneten Komponente an die übergeordnete Komponente weiterzuleiten, müssen Sie lediglich (mit Vue 3 Zusammensetzung API ) eine Methode aus dem Kontextobjekt im Setup übernehmen und einfach das ausgeben, was Sie gerade brauchen:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); } }

Sie können dies auch direkt in der Vorlage als Reaktion auf ein anderes Ereignis tun.

Unter Angularmüssen Sie zunächst einen EventEmitter wie folgt definieren:

@Output() customNameForYourEmitter = new EventEmitter();

Dann müssen Sie eine Emit-Methode für den EventEmitter aufrufen:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Slots/Inhaltsprojektion

In beiden Frameworks können Sie den Inhalt (sowohl einzelne als auch mehrere) einfach von der übergeordneten Komponente in die untergeordnete Komponente verschieben, indem Sie innerhalb der untergeordneten Tags zusätzliche Html-Dateien hinzufügen, mit leichten Unterschieden:

Vue:

` 

Angular:

Standard:
    

Benannter Slot:

<p yourname>
   Dies ist ein benannter Steckplatz
  </p>
  <p>Dies ist ein Standardsteckplatz</p>

Wenn Sie jedoch einige Teile Ihrer Anwendung bedingt rendern möchten, Vue ist intuitiver als Angular und ermöglicht eine schnellere Durchführung durch Hinzufügen der v-if Richtlinie zu Ihrer <template> Tag, mit dem Sie nur die Teile rendern können, die gerade benötigt werden.

Während die ng-Inhalt immer gerendert wird, müssen Sie in diesem Fall die ng-templateund erstellen Sie später Ihre eigene benutzerdefinierte Richtlinie:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@Directive({
  selector: '[customDirectiveName]'
})
export class CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

und wegen des Namens, den Sie Ihrem ng-template Attribut, weiß Angular, was gerendert werden soll:

Außerdem möchten Sie innerhalb der Komponente Ihre Vorlage projizieren, die in der @ContentChild um die richtige Vorlage zu erhalten:

@ContentChild(CustomDirective) content!: CustomDirective;

Dienstleistung vs. Laden

Angular ermutigt Sie in seinem Kern, das MVC-Designmuster zu verwenden, bei dem Sie Dienste für das Modell nutzen können. Aus diesem Grund müssen Sie das Muster der Abhängigkeitsinjektion erlernen, um Daten in Ihrer Anwendung frei verwenden zu können. Es ermöglicht Ihnen, die Seiteneffekte Ihrer API-Aufrufe zu trennen und dieselbe Logik im gesamten Projekt zu verwenden, indem Sie die Teile injizieren, die Sie gerade benötigen, was es auch zu einem modularen Ansatz macht.

Angular enthält auch das Ngrx/store-Framework, das auf dem Redux-Muster basiert, falls Sie einen reaktiveren Ansatz mit RxJs-Observables verwenden möchten. Es enthält Actions, die für das Versenden einzigartiger Ereignisse von Komponenten und/oder Diensten verwendet werden, Effects, die Seiteneffekte oder asynchrone Aktionen behandeln, die Sie durchführen möchten, und Reducers, die Ihren Zustand verändern.

Unter VueDer gängige Ansatz ist die Verwendung der Vuex-Bibliothek für die Zustandsverwaltung, die genau wie Ngrx/store auch Tools wie Actions, Mutations und Getters enthält, um Ihnen bei der Verwaltung und Organisation des Zustands Ihrer Anwendung zu helfen. Sie können sie modularisieren, indem Sie verschiedene Stores für Ihre Views festlegen, z.B. einen User Store oder einen Cart Store, aber das kann zu Problemen mit Namensabständen führen, es sei denn, Sie verwenden die Namespaced: wahr Eigenschaft in Ihrer Speicherdeklaration.

Hier ein Vergleich zwischen dem dienstleistungsbasierten Ansatz und dem Vuex-Ansatz, wenn die Aufgabe darin besteht, einige Produkt Daten für Ihr Geschäft:

@Injectable() // Dekorator, um anzuzeigen, dass wir ihn später in DI verwenden wollen
export Klasse ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //das tun, was immer Sie mit Ihren Produkten wollen
    });
    return this.products;
  }
}

Dann injizieren wir in der Komponente unseren zu verwendenden Dienst:
constructor(private service: HeroService) { }

Unter Vuesenden wir einfach eine Aktion, die einen Backend-Anruf für uns tätigt:

store.dispatch(getAllProducts)

und in der actions.ts Datei definieren wir eine Aktion:

Aktionen: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // Daten abrufen und die Ergebnisse in den Speicher stellen
}}

Abrufen von Daten

Mit VueSie können Axios/Fetch oder jede andere Bibliothek verwenden, die Sie verwenden möchten. Es ist wirklich einfach - Sie behandeln asynchrone Aufrufe mit Versprechen oder einem anderen Ansatz, der Ihnen am besten passt.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed'))
} catch (e) {
    //Fehler behandeln
}

Angular wird mit der HttpClient-Bibliothek geliefert, die Observables verwendet, was zu einem weiteren Vorteil führt - um sie richtig zu nutzen und/oder Daten zu manipulieren, müssen Sie RxJs lernen. Auch hier kann es ziemlich überwältigend sein, fließend zu werden und sich mit diesem abstrakten Konstrukt gleich zu Beginn vertraut zu fühlen.

Sie können Axios verwenden, wenn Sie das wollen, aber wie die GitHub-Seite von Axios sagt: "Axios ist stark von dem $http-Dienst inspiriert, der in Angular'

private getAllItems(): void {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('results'),
tap(console.log('tun Sie, was immer Sie hier als Nebeneffekt verwenden wollen')
catchError((error) => {
        //Fehler behandeln
})
)
.subscribe((result: ResultType[])
    //Endgültige Operation an gegebener Ausgabe
)
}

Resümee

| Vue | Angular |
| ———– | ———– |
| Erfordert die Verwendung von Typescript, klassenbasierten Komponenten/Diensten.
| Flache Lernkurve, einfacher Einstieg | Hohe Lernkurve (Typescript, RxJs, Dependency Injection) |
| Viele Dinge, die während der Projekteinrichtung konfiguriert werden müssen. Es muss nicht viel im Voraus eingestellt werden, aber man kann die Projektstruktur über die Konsole erstellen.
| Community-gesteuertes Rahmenwerk, das sowohl auf Angular als auch auf React basiert | Erstellt und gepflegt von Google |
| Nicht viel enthalten, externe Bibliotheken müssen installiert werden | Zustandsverwaltung, HttpClient im Framework enthalten |

Lesen Sie mehr:

JavaScript ist völlig tot. Irgendein Kerl im Internet

Einsatz von GraphQL/MongoDB API mit Netlify-Funktionen

Wie man ein Projekt mit schlechten Kodierungspraktiken zerstört