Jämförelsen av mästarna: Angular vs Vue

Starta ett projekt

Det snabbaste sättet att sparka igång en projekt är genom att använda CLI tillhandahålls av ramverkens upphovsmän. Båda kommer med ganska bra service; det finns dock några skillnader, t.ex., Vue har fler alternativ, vilket innebär att du kan skräddarsy ett projekt efter dina behov redan från början. Du kan välja Vue-version, oavsett om du behöver använda routing. Typescript, CSS preprocessorer eller sätta upp en linter direkt. Du kan också bestämma om du vill skapa tester (enhets- eller E2E-tester).

Angular levereras med en generator som gör att du kan skapa komponenter, tjänster, gränssnitt och direktiv direkt från konsolen, vilket enligt min erfarenhet är mycket praktiskt eftersom det inte finns något behov av att manuellt konfigurera mappar, filer och redundanta kod för hand, särskilt när du använder t.ex. MVC-mönster. Typescript kommer ut ur lådan med Angular och pressar dig att använda den. Om du inte har gjort det ännu, här är en praktisk introduktion till varför du bör prova det - du kan kolla in det här.

I början, Angular:s CLI frågar dig bara om routning eller föredragna CSS-preprocessorer, vilket i jämförelse med Vuelämnar inte mycket utrymme för dig att bestämma strukturen och stilen på din applikation. Men om du tänker följa de konventioner som du uppmanas att använda, kommer CLI att leda dig hela vägen.

Projektstruktur

Vue använder SFC (Single File Components) vilket gör det ganska enkelt för en ny utvecklare att börja använda ett ramverk och sätta sig in i koden.

Riktlinjer

Vue levereras också med direktiv som `v-if, v-for`, vilket är mycket intuitivt att använda eftersom det nästan är en kopia av Angular en. Vue använder samma konvention för tvåvägs databindning (bara genom att prefixera det med, t.ex. v- i `v-model`) och lägga till @/v-on som indikerar att vi reagerar på något. Angular separerar detta genom att ange vilket håll vi går åt genom att använda parenteser för händelsebindning och hakparenteser för egenskapsbindning, t.ex. `(change), [ngStyle], [(ngModel)]`.

I VueStrukturen i sig är enkel, det finns inget behov av att skapa separata filer för stilmallar och logik, så allt är organiserat och lättillgängligt. Naturligtvis, Vue levereras med en stilguide där du kan hitta rekommenderade regler att följa när du skapar ett projekt; det finns dock bara ett fåtal som är obligatoriska. 

Händelser

I det här fallet, Vue kommer igen med en mer praktisk lösning; nämligen att sända en händelse från barnkomponenten till dess förälder allt du behöver göra är att (med hjälp av Vue 3 Sammansättning API ) tar en metod från kontextobjektet i konfigurationen och skickar helt enkelt ut det du behöver för tillfället:

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

Du kan också göra det direkt i mallen som ett svar på någon annan händelse.

I Angularmåste du först definiera en EventEmitter på följande sätt:

@Output() customNameForYourEmitter = new EventEmitter();

Sedan måste du anropa en emit-metod på EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Slots/innehållsprojektion

I båda ramverken kan du enkelt flytta innehåll (såväl enstaka som flera) från den överordnade komponenten till dess underordnade genom att lägga till ytterligare html inuti de underordnade taggarna, med små skillnader:

Vue:

``` 

Angular:

Standard:
    

Namngiven plats:

<p yourname>
   Detta är en namngiven slot
  </p>
  <p>Detta är en standardplats</p>

Men om du vill villkora rendering av vissa delar av din applikation, Vue är mer intuitivt än Angular och låter dig göra det snabbare genom att lägga till v-if direktiv till din tagg, vilket gör att du bara kan rendera de delar som behövs för tillfället.

 </template

  
 </template

Även om ng-innehåll alltid återges, måste du i detta fall använda ng-malloch senare skapa ditt eget anpassade direktiv:

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

@Direktiv({
  väljare: '[customDirectiveName]'
})
export klass CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

och på grund av det namn du ger till din ng-mall attribut, kommer Angular att veta vad som ska göras:

<!-- Innehållet hamnar här

Inom komponenten vill du också projicera din mall som ska användas i @ContentChild för att få rätt mall:

@ContentChild(CustomDirective) innehåll!: CustomDirective;

Service vs butik

Angular i grunden uppmuntrar dig att använda MVC-designmönstret där du kan använda tjänster för modellen. På grund av detta måste du lära dig mönstret för beroendeinjektion för att fritt kunna hantera data i din applikation. Det låter dig separera biverkningar av dina, dvs API-anrop och använda samma logik över hela projektet genom att injicera de delar du behöver för tillfället, vilket också gör det till ett modulärt tillvägagångssätt.

Angular levereras också med Ngrx/store-ramverket baserat på Redux-mönstret om du vill använda ett mer reaktivt tillvägagångssätt med RxJs-observabler. Den levereras med Actions som används för att skicka unika händelser från komponenter och/eller tjänster, Effects som hanterar sidoeffekter eller asynkrona åtgärder som du vill utföra och Reducers som muterar ditt tillstånd.

I VueDet populäraste är att använda Vuex-biblioteket för tillståndshantering som också innehåller verktyg som Actions, Mutations och Getters, precis som Ngrx/store, för att hjälpa dig att hantera och organisera tillståndet i din applikation. Du kan modularisera det genom att ställa in olika butiker för dina vyer, t.ex. en användarbutik eller en kundvagnsbutik, men det kan leda till problem med namnavstånd, såvida du inte använder namngiven: true egenskap i din butiksdeklaration.

Här är en jämförelse mellan den tjänstebaserade metoden och Vuex-metoden när uppgiften är att hämta några Produkt data för din butik:

@Injectable() // dekorator för att ange att vi vill använda den i DI senare
export class ProductsService {
  privata produkter: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Produkt).then( (products: Produkt[]) => {
      //gör vad du vill med dina produkter
    });
    returnerar this.products;
  }
}

I komponenten injicerar vi sedan vår tjänst som ska användas:
constructor(private service: HeroService) { }

I Vueskickar vi helt enkelt en åtgärd som gör ett backend-anrop åt oss:

store.dispatch(hämtaAllaProdukter)

och i actions.ts fil definierar vi en åtgärd:

åtgärder: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // hämtar data och lägger in resultatet i butiken
}}

Hämtning av data

Med VueOm du vill kan du använda Axios/Fetch eller vilket bibliotek du vill, det är väldigt enkelt - du hanterar bara asynkrona anrop med löften eller vilken metod som passar dig bäst.

försök {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('gör vad som behövs'))
} catch (e) {
    //hantera fel
}

Angular levereras med HttpClient-biblioteket som använder observables vilket leder till en annan fördel - för att använda det korrekt och/eller manipulera data måste du lära dig RxJs. Återigen kan det vara ganska överväldigande att bli flytande och känna sig bekant med denna abstrakta konstruktion i början.

Du kan använda Axios om det är vad du vill göra, men som det står på Axios GitHub-sida: "Axios är starkt inspirerad av $http-tjänsten som tillhandahålls i Angular'

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

.pipe(
pluck('resultat'),
tap(console.log('gör vilken sidoeffekt du vill använda här')
catchError((fel) => {
        //hantera felet
})
)
.subscribe((resultat: ResultType[])
    //slutlig operation på given utdata
)
}

Sammanfattningsvis

| Vue | Angular | Vue | Angular
| ———– | ———– |
| Kräver inte att du följer mycket strikta regler | Kräver att du använder Typescript, klassbaserade komponenter/tjänster
| Platt inlärningskurva, lätt att börja med | Hög inlärningskurva (Typescript, RxJs, Dependency Injection) | Hög inlärningskurva (Typescript, RxJs, Dependency Injection)
| Många saker att konfigurera under projektinställningen Inte mycket att ställa in i förväg men det låter dig skapa projektstruktur via konsolen
| Community-drivet ramverk baserat på både Angular och React Skapat och underhållet av Google
| Inte mycket ingår, externa bibliotek måste installeras Statushantering, HttpClient ingår i ramverket

Läs mer om detta:

JavaScript är helt död. Någon snubbe på internet

Distribuera GraphQL/MongoDB API med hjälp av Netlify-funktioner

Hur man dödar ett projekt med dålig kodningspraxis