Sammenligningen af mestrene: Angular vs Vue

Opsætning af et projekt

Den hurtigste måde at starte en projekt er ved at bruge CLI leveret af rammeværkets forfattere. Begge leveres med ret god service; der er dog få forskelle, f.eks, Vue kommer med flere muligheder, og derfor kan du skræddersy et projekt til dine behov helt fra starten. Du kan vælge Vue-versionUanset om du skal bruge routing. Typescript, CSS-præprocessorer eller opsætte en linter med det samme. Du kan også beslutte, om du vil opsætte tests (unit eller E2E).

Angular leveres med en generator, som giver dig mulighed for at oprette komponenter, tjenester, grænseflader og direktiver direkte fra konsollen, hvilket efter min erfaring er meget praktisk, da der ikke er behov for manuelt at opsætte mapper, filer og overflødige Kode i hånden, især når man bruger f.eks. et MVC-mønster. Typescript kommer ud af boksen med Angular og presser dig til at bruge det. Hvis du ikke har gjort det endnu, er her en praktisk introduktion til, hvorfor du bør prøve det - du kan tjekke det ud her.

Til at begynde med, Angular's CLI spørger dig kun om routing eller foretrukne CSS-præprocessorer, som i sammenligning med Vuegiver dig ikke meget plads til at bestemme strukturen og stilen i dit program. Men hvis du vil følge den konvention, den beder dig om at bruge, vil CLI lede dig hele vejen.

Projektets struktur

Vue bruger SFC (Single File Components), hvilket gør det ganske enkelt for en ny udvikler at komme i gang med at bruge et framework og finde sig til rette i koden.

Direktiver

Vue kommer også ud af boksen med direktiver som `v-if, v-for`, som er meget intuitive at bruge, da det næsten er en kopi af Angular dem. Vue bruger den samme konvention til tovejs databinding (blot ved at sætte v- i `v-model` foran) og tilføje @/v-on for at angive, at vi reagerer på noget. Angular adskiller dette ved at angive, hvilken vej vi går, ved at bruge parenteser til hændelsesbinding og firkantede parenteser til egenskabsbinding, dvs. `(change), [ngStyle], [(ngModel)]`.

I VueDa selve strukturen er enkel, er det ikke nødvendigt at lave separate filer til stylesheets og logik, så det hele er organiseret og overskueligt. Det er klart, Vue kommer med en stilguide, hvor du kan finde anbefalede regler at følge, når du opretter et projekt; der er dog kun nogle få, der er obligatoriske. 

Begivenheder

I dette tilfælde, Vue kommer igen med en mere praktisk løsning; nemlig at sende en hændelse fra den underordnede komponent til dens overordnede, alt hvad du skal gøre er (ved hjælp af Vue 3 Sammensætning API ) tager en metode fra kontekstobjektet i opsætningen og udsender simpelthen det, du har brug for i øjeblikket:

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

Du kan også gøre det direkte i skabelonen som en reaktion på en anden begivenhed.

I Angularskal du først definere en EventEmitter på følgende måde:

@Output() customNameForYourEmitter = new EventEmitter();

Derefter skal du kalde en emit-metode på EventEmitteren:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Slots/indholdsprojektion

I begge frameworks kan du nemt flytte indhold (enkelt eller flere) fra den overordnede komponent til den underordnede ved blot at tilføje ekstra html i de underordnede tags, dog med små forskelle:

Vue:

``. 

Angular:

Standard:
    .

Navngivet slot:
    .

<p yourname>
   Dette er et navngivet slot
  </p>
  <p>Dette er en standardplads</p>

Men hvis du ønsker at gøre nogle dele af din applikation betinget, Vue er mere intuitiv end Angular og lader dig gøre det hurtigere ved at tilføje v-if direktiv til din . tag, som giver dig mulighed for kun at gengive de dele, der er brug for i øjeblikket.

.
  .
.

   </template

Mens ng-indhold altid gengives, skal du i dette tilfælde bruge ng-skabelonog senere oprette dit eget brugerdefinerede direktiv:

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

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

og på grund af det navn, du giver din ng-skabelon attribut, vil Angular vide, hvad der skal gengives:

.
  .
.

I komponenten vil du også projicere din skabelon, så den kan bruges i @ContentChild for at få den rigtige skabelon:

@ContentChild(CustomDirective) content!: CustomDirective;

Service vs. butik

Angular opfordrer i sin kerne til at bruge MVC-designmønsteret, hvor man kan bruge tjenester til modellen. Derfor er du nødt til at lære dependency injection-mønsteret for at kunne bruge data frit i din applikation. Det giver dig mulighed for at adskille sideeffekter af dine API-kald og bruge den samme logik på tværs af hele projektet ved at injicere de dele, du har brug for i øjeblikket, hvilket også gør det til en modulær tilgang.

Angular leveres også med Ngrx/store-rammen baseret på Redux-mønsteret, hvis du vil bruge en mere reaktiv tilgang med RxJs-observationer. Det kommer med Actions, som bruges til at sende unikke hændelser fra komponenter og/eller tjenester, Effects, som håndterer sideeffekter eller asynkrone handlinger, du vil udføre, og Reducers, som muterer din tilstand.

I VueDen populære tilgang er at bruge Vuex-biblioteket til tilstandsstyring, som også kommer med værktøjer som Actions, Mutations og Getters, ligesom Ngrx/store, til at hjælpe dig med at styre og organisere tilstanden i din applikation. Du kan modularisere det ved at indstille forskellige stores til dine visninger, f.eks. en user store eller en cart store, men det kan føre til problemer med name-spacing, medmindre du bruger namespaced: true egenskab i din butiksdeklaration.

Her er en sammenligning af den servicebaserede tilgang og Vuex-tilgangen, når opgaven er at hente nogle produkt data til din butik:

@Injectable() // dekorator for at angive, at vi vil bruge den i DI senere.
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      // gør, hvad du vil med dine produkter
    });
    return this.products;
  }
}

Derefter injicerer vi den tjeneste, der skal bruges, i komponenten:
constructor(private service: HeroService) { }

I Vuesender vi blot en handling, der foretager et backend-kald for os:

store.dispatch(getAllProducts)

og i actions.ts fil definerer vi en handling:

handlinger: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // hent data og læg resultaterne i butikken
}}

Hentning af data

Med VueDu kan bruge Axios/Fetch, eller hvilket bibliotek du vil, det er meget ligetil - du håndterer bare asynkrone kald med promises eller den tilgang, der passer dig bedst.

prøv {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('gør hvad der er nødvendigt'))
} catch (e) {
    //håndter fejl
}

Angular kommer med HttpClient-biblioteket, der bruger observables, hvilket fører til en anden fordel - for at bruge det korrekt og/eller manipulere data skal du lære RxJs. Igen kan det være ret overvældende at blive flydende og føle sig fortrolig med denne abstrakte konstruktion i begyndelsen.

Du kan bruge Axios, hvis det er det, du vil, men som der står på Axios' GitHub-side: 'Axios er stærkt inspireret af $http-tjenesten, der findes i Angular'

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

.pipe(
pluck('results'),
tap(console.log('gør den sideeffekt, du vil bruge her')
catchError((error) => {
        //håndter fejl
})
)
.subscribe((result: ResultType[])
    //endelig operation på givet output
)
}

Opsummering

| Vue Angular
| ———– | ———– |
| Presser dig ikke til at følge meget strenge regler | Kræver brug af Typescript, klassebaserede komponenter/services |.
| Flad indlæringskurve, let at komme i gang med | Høj indlæringskurve (Typescript, RxJs, Dependency Injection) | Høj indlæringskurve (Typescript, RxJs, Dependency Injection)
| Der er mange ting, der skal konfigureres under projektopsætningen. Der er ikke meget at sætte op på forhånd, men det giver dig mulighed for at generere projektstruktur via konsollen.
| Community-drevet rammeværk baseret på både Angular og React | Oprettet og vedligeholdt af Google
| Der er ikke meget inkluderet, man skal installere eksterne biblioteker. State management, HttpClient inkluderet i frameworket.

Læs mere om det:

JavaScript er fuldstændig død. En fyr på internettet

Implementer GraphQL/MongoDB API ved hjælp af Netlify-funktioner

Sådan dræber du et projekt med dårlig kodningspraksis