Samanburður meistaranna: Angular vs Vue

Að setja upp verkefni

Hraðasta leiðin til að hefja a verkefni er með því að nota CLI sem höfundar rammasetnanna útveguðu. Báðir bjóða upp á nokkuð góða þjónustu; þó eru fáir munir, þ.e., Vue kemur með fleiri valkostum, svo þú getur sniðið verkefnið að þínum þörfum frá upphafi. Þú getur valið Vue-útgáfa, hvort þú þarft að nota leiðsögn. Tegundaskjal, CSS-forvinnslur eða setja upp linter beint á staðnum. Einnig gerir það þér kleift að ákveða hvort þú viljir setja upp prófanir (einingarprófanir eða end-til-end prófanir).

Einn tveggja pósts 60 tonn Kemur með generator sem gerir þér kleift að búa til íhluti, þjónustur, viðmót og stýringar beint úr stjórnborðinu, sem mér finnst mjög hentugt þar sem ekki þarf að stilla möppur, skrár og óþarfa handvirkt. kóði með handvirkum hætti, sérstaklega þegar þú notar t.d. MVC-mynstur. TypeScript kemur beint úr kassanum með Einn tveggja pósts 60 tonn og setur þig einhvern veginn undir þrýsting til að nota það. Ef þú hefur ekki gert það ennþá, hér er hagnýt kynning á því hvers vegna þú ættir að prófa það – þú getur kíkt á það. hér.

Í upphafi, CLI Angular spyr þig aðeins um leiðarvísun eða uppáhalds CSS-forvinnsluaðila sem, í samanburði við Vue, gefur þér ekki mikið svigrúm til að ákveða uppbyggingu og stíl forritsins þíns. En ef þú ætlar að fylgja þeim venjum sem krafist er, mun CLI leiða þig alla leið.

Uppbygging verkefnisins

Vue notar SFC (Single File Components), sem gerir það nokkuð einfalt fyrir nýjan þróunaraðila að byrja að nota ramma og komast á strik í kóðanum.

Leiðbeiningar

Vue kemur einnig beint úr kassanum með skipunum eins og `v-if, v-for`, sem er mjög auðvelt í notkun þar sem það er nánast afrit af Einn tveggja pósts 60 tonn einnar. Vue notar sömu konvension fyrir tvíhliða gögn binding (bara með því að forsetja hana, þ.e. v- í `v-model`) og bæta við @/v-on sem gefur til kynna að við séum að reacting eitthvað. Einn tveggja pósts 60 tonn Aðskilur þetta með því að gefa til kynna hvaða leið við erum að fara með því að nota klamma fyrir atburðatengingu og ferningsklofa fyrir eiginleikatengingu, þ.e. `(change), [ngStyle], [(ngModel)]`.

Í Vue, uppbyggingin sjálf er einföld, ekki þarf að búa til aðskildar skrár fyrir stílsíður og rökfræði, svo allt er skipulagt og aðgengilegt. Auðvitað, Vue Kemur með stílhandbók þar sem þú finnur ráðlagðar reglur sem ber að fylgja við gerð verkefnis; þó eru aðeins fáar reglur skyldubundnar. 

Viðburðir

Í þessu tilviki, Vue kemur aftur með þægilegri lausn; nefnilega, til að senda atburð frá barnahlutanum til foreldris síns þarftu aðeins að (með því að nota Vue 3 Samsetning forritaskil ) Taktu aðferð úr samhengi-hlutnum í uppsetningunni og sendu einfaldlega út það sem þú þarft hverju sinni:

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

Þú getur líka gert það beint í sniðmátinu sem svar við einhverju öðru atburði.

Í Einn tveggja pósts 60 tonn, þú þarft fyrst að skilgreina EventEmitter á eftirfarandi hátt:

@Output() customNameForYourEmitter = new EventEmitter();

Þá þarftu að kalla `emit`-aðferðina á `EventEmitter`:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Spilakassar/efnisvarp

Í báðum rammasetningum geturðu auðveldlega fært efnið (einn sem og margir) frá foreldisþættinum yfir í barnþáttinn með því að bæta við auknum HTML innan barnmerkjanna, með smávægilegum mun:

Vue:

`` 

Angular:

Skilgreining:
    

Nefndur reitur:

<p yourname>
   Þetta er nefndur raðinn.
  </p>
  <p>Þetta er sjálfgefin rauf</p>

Hins vegar, ef þú vilt birta ákveðna hluta forritsins þíns skilyrt, Vue er innsæisbetra en Einn tveggja pósts 60 tonn og gerir þér kleift að gera það hraðar með því að bæta við the v-if leiðbeiningu til þíns sniðmát merki, sem gerir þér kleift að birta aðeins þær hluta sem eru núna nauðsynlegir.

Á meðan ng-content er alltaf birt, þú þarft að nota í þessu tilviki the ng-sniðmát, og búa síðar til þitt eigið sérsniðið directive:

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

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

og vegna nafnsins sem þú gefur þínum ng-sniðmát Eiginleiki, Angular mun vita hvað á að birta:

Einnig, innan íhlutarins, viltu varpa sniðmáti þínu til notkunar í @ContentChild til að fá rétt sniðmát:

@ContentChild(CustomDirective) content!: CustomDirective;

Þjónusta vs verslun

Einn tveggja pósts 60 tonn Í kjarna sínum hvetur það þig til að nota MVC-hönnunarmynstur þar sem þú getur notað þjónustur fyrir módelið. Vegna þess þarftu að læra á dependency injection-mynstrið til að vinna frjálslega með gögn í forritinu þínu. Það gerir þér kleift að aðskilja aukaverkanir, þ.e. API-köll, og nota sömu rökfræði í öllu verkefninu með því að sprauta inn þeim hlutum sem þú þarft hverju sinni, sem gerir nálgunina módulega.

Einn tveggja pósts 60 tonn Einnig fylgir Ngrx/store-ramminn sem byggir á Redux-mynstrinu, ef þú vilt nota reactíva nálgun með RxJS-observables. Hann inniheldur Actions sem eru notuð til að senda einstök atburði frá íhlutum og/eða þjónustum, Effects sem sjá um aukaverkanir eða asynchróna aðgerðir sem þú vilt framkvæma, og Reducers sem breyta ástandi þínu.

Í Vue, Vinsæl nálgun er að nota Vuex-bókasafnið til ástandsstjórnunar, sem kemur einnig með verkfæri eins og Actions, Mutations og Getters, rétt eins og Ngrx/store, til að hjálpa þér að stjórna og skipuleggja ástand forritsins þíns. Þú getur móðúlíserað það með því að setja upp mismunandi geymslur fyrir útsýni þín, t.d. notendageymslu eða innkaupakörfugeymslu, en það getur leitt til vandamála með nafnarými, nema þú notir Nafnarými: satt eign í yfirlýsingu verslunarinnar þinnar.

Hér er samanburður á þjónustumiðaðri nálgun og Vuex-nálguninni þegar verkefnið er að sækja nokkra vara Gögn fyrir verslunina þína:

@Injectable() // skraut til að gefa til kynna að við viljum nota það í DI síðar
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
 //do whatever you like with your products
    });
    return this.products;
  }
}

Síðan, í íhlutnum, sprautum við þjónustuna okkar til notkunar:
constructor(private service: HeroService) { }

Í Vue, við sendum einfaldlega af stað aðgerð sem gerir bakenda-kall fyrir okkur:

Senda í búð(fáAllarVörur)

og í aðgerðir.ts Í skrá skilgreinum við aðgerð:

actions: {
getAllProducts ({ commit }){
    commit(‘setProducts’, await getProducts();); // sækja gögn og setja niðurstöðurnar í geymsluna
}}

Sækja gögn

Með Vue, Þú getur notað Axios/Fetch eða hvaða bókasafn sem þú vilt, það er mjög einfalt – þú sérð bara um ósamhverf köll með loforðum eða hvaða nálgun sem hentar þér best.

try {
http.get(‘https://url.to.get.data’)
    .then(res => res.json())
    .then(data => console.log(‘do whatever is needed’))
} catch (e) {
    //handle error
}

Einn tveggja pósts 60 tonn Það kemur með HttpClient-bókasafninu sem notar observables, sem leiðir þig að annarri kosti – til að nota það rétt og/eða vinna úr gögnum þarftu að læra RxJs. Aftur á móti getur verið ansi yfirþyrmandi að verða fær og kynnast þessari abstraktuppbyggingu í upphafi.

Þú getur notað Axios ef það er það sem þú vilt gera, en eins og segir á GitHub-síðu Axios: ‘Axios er mjög innblásið af $http-þjónustunni sem er veitt í Einn tveggja pósts 60 tonn’

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

.pipe(
pluck(‘results’),
tap(console.log(‘do whatever side effect you want to use here’)
catchError((error) => {
 //handle error
}))

.subscribe((result: ResultType[])
    //final operation on given output)

}

Að draga saman

| Vue | Angular |
| ———– | ———– |
| Þrýstir þér ekki til að fylgja mjög ströngum reglum | Krefst notkunar á Typescript, flokkabundnum íhlutum/þjónustum |
| Lágur námsferill, auðvelt að byrja með | Hár námsferill (Typescript, RxJs, Dependency Injection) |
| Margt sem þarf að stilla við uppsetningu verkefnisins | Ekki mikið til að stilla upphaflega en það gerir þér kleift að búa til verkefnisuppbyggingu í gegnum skráarspjaldið |
Samfélagsdrifin rammaáætlun byggð á bæði Angular og React | Búið til og viðhaldið af Google |
| Ekki mikið innifalið, þarf að setja upp utanaðkomandi bókasöfn | Ástandsstjórnun, HttpClient innifalið í rammanum |

Lesa meira:

JavaScript er alveg dauður. Einhver gaur á netinu

Setja upp GraphQL/MongoDB API með Netlify Functions

Hvernig á að drepa verkefni með slæmum forritunarvenjum