Čempionų palyginimas: Angular ir Vue

Projekto nustatymas

Greičiausias būdas pradėti projektas yra naudojant Karkasų autorių pateikta CLI. Abu jie teikia gana geras paslaugas; tačiau yra keletas skirtumų, t. y., Vue yra daugiau galimybių, todėl nuo pat pradžių galite pritaikyti projektą pagal savo poreikius. Galite pasirinkti Vue versija, ar reikia naudoti maršruto parinkimą. Mašinraštis, CSS preprocesorių arba iš karto sukurkite linterį. Taip pat galite nuspręsti, ar norite nustatyti testus (vienetinius ar E2E).

Angular turi generatorių, kuris leidžia kurti komponentus, paslaugas, sąsajas ir direktyvas tiesiai iš konsolės, o tai, iš mano patirties, yra labai patogu, nes nereikia rankiniu būdu kurti aplankų, failų ir nereikalingų kodas rankiniu būdu, ypač kai naudojate, pvz., MVC modelį. Tipeskriptas iškart pateikiamas su Angular ir tarsi verčia jus ja naudotis. Jei to dar nepadarėte, čia pateikiama patogi įžanga, kodėl turėtumėte ją išbandyti - galite ją peržiūrėti čia.

Pradžioje, Angular CLI klausia tik apie maršruto parinkimą arba pageidaujamus CSS preprocesorius, kurie, palyginti su Vue, nepalieka daug erdvės apsispręsti dėl paraiškos struktūros ir stiliaus. Tačiau jei ketinate laikytis konvencijos, kurią ji prašo naudoti, CLI jus ves visą kelią.

Projekto struktūra

Vue naudoja SFC (Single File Components), todėl naujam kūrėjui gana paprasta pradėti naudoti karkasą ir susigaudyti kode.

Direktyvos

Vue taip pat turi tokias direktyvas kaip `v-if, v-for`, kurias naudoti labai intuityvu, nes jos yra beveik kopija Angular tie. Vue naudojama ta pati dviejų krypčių duomenys (tiesiog pridedant priešdėlį, t. y., v- iš `v-modelis`) ir pridedant @/v-on, nurodantį, kad į kažką reaguojame. Angular atskirti tai nurodant, į kurią pusę einame, naudodami skliaustelius įvykių susiejimui ir laužtinius skliaustelius savybių susiejimui, t. y. `(change), [ngStyle], [(ngModel)]`.

Svetainėje Vue, pati struktūra yra paprasta, nereikia kurti atskirų failų stilių rinkmenoms ir logikai, todėl viskas organizuota ir lengvai pasiekiama. Žinoma, Vue yra stiliaus vadovas, kuriame rasite rekomenduojamų taisyklių, kurių reikia laikytis kuriant projektą, tačiau yra tik kelios privalomos taisyklės. 

Renginiai

Šiuo atveju, Vue vėl pateikia patogesnį sprendimą, t. y. norint išleisti įvykį iš pavaldžiojo komponento į jo patronuojantįjį komponentą, tereikia (naudojant Vue 3 Sudėtis API ) paimkite metodą iš sąrankos konteksto objekto ir paprasčiausiai išspausdinkite tai, ko jums tuo metu reikia:

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

Taip pat galite tai atlikti tiesiogiai šablone kaip atsaką į kitą įvykį.

Svetainėje Angular, pirmiausia reikia apibrėžti EventEmitter taip:

@Output() customNameForYourEmitter = new EventEmitter();

Tada reikia iškviesti "EventEmitter" skleidimo metodą:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Lizdų / turinio projekcija

Abiejuose karkasuose galite lengvai perkelti turinį (tiek vieną, tiek kelis) iš tėvinio komponento į jo antrinį komponentą tiesiog pridėdami papildomą html į antrinio komponento žymes, tačiau su nedideliais skirtumais:

Vue:

`<`` 

Angular:

Numatytoji reikšmė:
    

Pavadintas lizdas:

<p yourname>
   Tai pavadintas lizdas
  </p>
  <p>Tai numatytasis lizdas</p>

Tačiau jei norite sąlyginai atvaizduoti kai kurias programos dalis, Vue yra intuityvesnis nei Angular ir leidžia tai atlikti greičiau, pridedant v-if direktyvą į savo žyma, kuri leidžia atvaizduoti tik tas dalis, kurių šiuo metu reikia.

Nors ng-content visada atvaizduojamas, šiuo atveju reikia naudoti ng-šablonas, o vėliau sukurkite savo pasirinktinę direktyvą:

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

@Direktyvas({
  selector: '[customDirectiveName]'
})
eksportuoti klasę CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

ir dėl vardo, kurį suteikiate savo ng-šablonas atributas, Angular žinos, ką reikia atvaizduoti:

Be to, komponento viduje norite suprojektuoti šabloną, kuris bus naudojamas @ContentChild kad gautumėte tinkamą šabloną:

@ContentChild(CustomDirective) content!: CustomDirective;

Paslauga ir parduotuvė

Angular iš esmės skatina naudoti MVC projektavimo modelį, kuriame modeliui galima naudoti paslaugas. Dėl šios priežasties, norėdami laisvai valdyti duomenis savo programoje, turite išmokti priklausomybių injekcijos šabloną. Jis leidžia atskirti šalutinius jūsų, t. y. API skambučių, poveikius ir naudoti tą pačią logiką visame projekte, injektuojant tas dalis, kurių jums tuo metu reikia, todėl tai taip pat yra modulinis metodas.

Angular taip pat pridedama "Redux" modeliu pagrįsta "Ngrx/store" sistema, jei norite naudoti reaktyvesnį požiūrį su "RxJs" stebimaisiais objektais. Joje yra Actions, kurie naudojami unikaliems įvykiams iš komponentų ir (arba) paslaugų siųsti, Effects, kurie tvarko šalutinius efektus arba asinchroninius veiksmus, kuriuos norite atlikti, ir Reducers, kurie keičia jūsų būseną.

Svetainėje Vue, populiarus būdas yra naudoti Vuex biblioteką būsenos valdymui, kuri taip pat turi tokius įrankius kaip Actions, Mutations ir Getters, kaip ir Ngrx/store, kurie padeda valdyti ir tvarkyti jūsų programos būseną. Galite ją modulizuoti nustatydami skirtingas saugyklas savo rodiniams, t. y. naudotojo saugyklą arba krepšelio saugyklą, tačiau dėl to gali kilti vardų išsidėstymo problemų, nebent naudosite vardų išdėstymas: true savybė jūsų parduotuvės deklaracijoje.

Čia pateikiamas paslaugomis pagrįsto metodo ir Vuex metodo palyginimas, kai užduotis yra gauti tam tikrą produktas jūsų parduotuvės duomenis:

@Injectable() // dekoratorius, nurodantis, kad vėliau norime jį naudoti DI
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //darykite su produktais, ką tik norite
    });
    return this.products;
  }
}

Tada į komponentą įskiepijame savo paslaugą, kuri bus naudojama:
constructor(private service: HeroService) { }

Svetainėje Vuepaprasčiausiai išsiunčiame veiksmą, kuris atlieka atgalinį skambutį mus:

store.dispatch(getAllProducts)

ir actions.ts faile apibrėžiame veiksmą:

veiksmai: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // paimkite duomenis ir įdėkite rezultatus į saugyklą
}}

Duomenų gavimas

Su Vue, galite naudoti "Axios/Fetch" arba bet kurią kitą biblioteką, kurią norite naudoti, tai tikrai paprasta - tiesiog tvarkykite asinchroninius iškvietimus naudodami pažadus arba bet kurį jums tinkamiausią metodą.

pabandykite {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('daryk, ką reikia'))
} catch (e) {
    // tvarkyti klaidą
}

Angular pridedama "HttpClient" biblioteka, kuri naudoja stebimus elementus, todėl turite dar vieną privalumą - norėdami tinkamai ją naudoti ir (arba) manipuliuoti duomenimis, turite išmokti RxJs. Vėlgi, iš pat pradžių gali būti gana sudėtinga sklandžiai išmokti ir susipažinti su šia abstrakčia konstrukcija.

Galite naudoti "Axios", jei norite tai daryti, bet, kaip rašoma "Axios GitHub" puslapyje: "Axios" yra labai įkvėpta $http paslaugos, teikiamos Angular'

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

.pipe(
pluck('results'),
tap(console.log('darykite bet kokį šalutinį poveikį, kurį norite čia naudoti')
catchError((error) => {
        // tvarkyti klaidą
})
)
.subscribe((result: ResultType[])
    //galutinė operacija su duotu rezultatu
)
}

Apibendrinimas

| Vue | Angular |
| ———– | ———– |
| Nereikalauja laikytis labai griežtų taisyklių | Reikia naudoti "Typescript", klasėmis pagrįstus komponentus / paslaugas |
| Lygus mokymosi kursas, lengva pradėti | Aukštas mokymosi kursas (Typescript, RxJs, Dependency Injection) |
| Projekto konfigūravimo metu reikia sukonfigūruoti daugybę dalykų| Iš anksto daug ko nereikia nustatyti, bet tai leidžia jums sukurti projekto struktūrą per konsolę |
| Bendrijos inicijuota sistema, pagrįsta Angular ir React | Sukūrė ir prižiūri "Google" |
| Į sistemą įtraukta nedaug, reikia įdiegti išorines bibliotekas| Į sistemą įtrauktas būsenos valdymas, HttpClient |

Skaityti daugiau:

JavaScript yra visiškai miręs. Kažkoks vyrukas internete

GraphQL/MongoDB API diegimas naudojant "Netlify" funkcijas

Kaip nužudyti projektą dėl blogos kodavimo praktikos