Čempionu salīdzinājums: Angular pret Vue

Projekta iestatīšana

Ātrākais veids, kā sākt projekts ir, izmantojot CLI, ko nodrošina ietvaru autori. Abi nāk ar diezgan labu servisu; tomēr ir dažas atšķirības, t. i., Vue ir vairāk iespēju, tāpēc jūs varat pielāgot projektu savām vajadzībām jau no paša sākuma. Jūs varat izvēlēties Vue versija, vai ir jāizmanto maršrutēšana. Mašīnraksts, CSS pirmapstrādes procesori vai iestatiet linteri tieši uz priekšu. Tas arī ļauj jums izlemt, vai vēlaties iestatīt testus (vienības vai E2E).

Angular ir iekļauts ģenerators, kas ļauj izveidot komponentes, pakalpojumus, saskarnes un direktīvas tieši no konsoles, kas, pēc manas pieredzes, ir ļoti ērti, jo nav nepieciešams manuāli iestatīt mapes, failus un lieku darbu. kods ar rokām, jo īpaši, ja izmantojat, piemēram, MVC modeli. Typescript ir aprīkots ar Angular un nedaudz piespiež jūs to izmantot. Ja vēl neesat to darījis, šeit ir noderīgs ievads, kāpēc jums to vajadzētu izmēģināt - varat to apskatīt. šeit.

Sākumā, Angular CLI jautā tikai par maršrutēšanu vai vēlamajiem CSS pirmapstrādes procesoriem, kas, salīdzinot ar Vue, neatstāj jums daudz iespēju izlemt par pieteikuma struktūru un stilu. Taču, ja jūs ievērosiet konvenciju, ko tā pieprasa izmantot, CLI jūs vadīs visu ceļu.

Projekta struktūra

Vue izmanto SFC (Single File Components), kas jaunajiem izstrādātājiem ļauj diezgan vienkārši sākt izmantot karkasu un orientēties kodā.

Direktīvas

Vue ir arī ar tādām direktīvām kā `v-if, v-for`, kas ir ļoti intuitīvi lietojama, jo tā ir gandrīz kā kopija lietojumprogrammai Angular tiem. Vue izmanto to pašu konvenciju divvirzienu dati (tikai pievienojot prefiksu, t.i., v- vārdkopā `v-modelis`) un pievienojot @/v-on, kas norāda, ka mēs uz kaut ko reaģējam. Angular atdalīt to, norādot, kurā virzienā mēs ejam, izmantojot iekavās notikumu sasaistīšanai un kvadrātiekavās iekavās īpašību sasaistīšanai, t.i., `(change), [ngStyle], [(ngModel)]`.

In Vue, pati struktūra ir vienkārša, nav nepieciešams izveidot atsevišķus failus stilu tabulām un loģikai, tāpēc viss ir sakārtots un ērti pieejams. Protams, Vue ir pievienots stila ceļvedis, kurā atrodami ieteicamie noteikumi, kas jāievēro, veidojot projektu, tomēr ir tikai daži obligāti noteikumi. 

Notikumi

Šajā gadījumā, Vue atkal piedāvā vēl ērtāku risinājumu, proti, lai izsauktu notikumu no atvasinātās komponentes uz tās vecāku, viss, kas jums ir jādara, ir (izmantojot Vue 3 Sastāvs API ) pārņem metodi no konteksta objekta iestatīšanas un vienkārši izstaro to, kas jums tajā brīdī ir nepieciešams:

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

To var izdarīt arī tieši šablonā kā reakciju uz kādu citu notikumu.

In Angularvispirms jādefinē EventEmitter šādi:

@Output() customNameForYourEmitter = new EventEmitter();

Pēc tam ir jāizsauc EventEmitter izstarošanas metode:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Laika nišas/objekta projekcija

Abās programmās varat viegli pārvietot saturu (gan vienu, gan vairākus) no vecāka komponenta uz tā atvasināto komponentu, vienkārši pievienojot papildu html atvasinātajos tagos, ar nelielām atšķirībām:

Vue:

`<`` 

Angular:

Noklusējuma iestatījumi:
    

Nosauktais slots:

<p yourname>
   Šis ir nosauktais slots
  </p>
  <p>Šis ir noklusējuma slots</p>

Tomēr, ja vēlaties nosacīti atveidot dažas lietojumprogrammas daļas, Vue ir intuitīvāks nekā Angular un ļauj to izdarīt ātrāk, pievienojot v-if direktīvu uz jūsu tagu, kas ļauj atveidot tikai tās daļas, kuras pašlaik ir nepieciešamas.

Lai gan ng-content vienmēr tiek atveidots, šajā gadījumā ir jāizmanto ng-templateun vēlāk izveidot savu pielāgotu direktīvu:

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

@Directive({
  selector: '[customDirectiveName]'
})
eksportēt klasi CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

un tā nosaukuma dēļ, ko tu dod savam ng-template atribūtu, Angular zinās, kas ir jāatveido:

Turklāt komponenta ietvaros vēlaties projektēt savu veidni, lai to izmantotu komponenta @ContentChild lai iegūtu pareizo veidni:

@ContentChild(CustomDirective) saturs!: CustomDirective;

Pakalpojums pret veikalu

Angular savā būtībā mudina izmantot MVC projektēšanas modeli, kurā modelim var izmantot pakalpojumus. Tāpēc jums ir jāapgūst atkarību iesmidzināšanas modelis, lai brīvi darbotos ar datiem savā lietojumprogrammā. Tas ļauj nošķirt jūsu, t. i., API izsaukumu, blakusparādības un izmantot vienu un to pašu loģiku visā projektā, injicējot tajā brīdī nepieciešamās daļas, kas arī padara to par modulāru pieeju.

Angular ir arī Ngrx/store ietvars, kas balstīts uz Redux modeli, ja vēlaties izmantot reaktīvāku pieeju ar RxJs novērojumiem. Tas ir aprīkots ar Actions, ko izmanto unikālu notikumu nosūtīšanai no komponentēm un/vai pakalpojumiem, Effects, kas apstrādā blakusparādības vai async darbības, kuras vēlaties veikt, un Reducers, kas mutē jūsu stāvokli.

In Vue, populārākā pieeja ir izmantot Vuex bibliotēku stāvokļa pārvaldībai, kurai ir arī tādi rīki kā Actions, Mutations un Getters, tāpat kā Ngrx/store, lai palīdzētu pārvaldīt un organizēt jūsu lietojumprogrammas stāvokli. Jūs varat to modulēt, iestatot dažādus veikalus saviem skatiem, t. i., lietotāja veikalu vai grozsargu veikalu, taču tas var radīt vārdu izvietojuma problēmas, ja vien neizmantojat bibliotēkas ar nosaukumiem: true īpašība veikala deklarācijā.

Šeit ir sniegts uz pakalpojumiem balstītas pieejas un Vuex pieejas salīdzinājums, kad uzdevums ir iegūt dažus datus. produkts veikala datus:

@Injectable() // dekorators, lai norādītu, ka vēlamies to vēlāk izmantot DI.
eksportēt klasi ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //dariet ar produktiem, ko vēlaties
    });
    return this.products;
  }
}

Pēc tam komponentē injicējam mūsu izmantojamo pakalpojumu:
konstruktors(private service: HeroService) { }

In Vue, mēs vienkārši nosūtām darbību, kas veic backend izsaukumu uz mums:

store.dispatch(getAllProducts)

un actions.ts failā mēs definējam darbību:

darbības: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // iegūt datus un ievietot rezultātus veikalā
}}

Datu iegūšana

Ar Vue, varat izmantot Axios/Fetch vai jebkuru citu bibliotēku, kuru vēlaties izmantot, tas ir ļoti vienkārši - jūs vienkārši apstrādājat asinhronos izsaukumus, izmantojot solījumus vai citu jums piemērotāko pieeju.

mēģiniet {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('dariet, kas nepieciešams'))
} catch (e) {
    // apstrādā kļūdu
}

Angular nāk kopā ar HttpClient bibliotēku, kas izmanto observables, kas noved pie vēl vienas priekšrocības - lai to pareizi izmantotu un/vai manipulētu ar datiem, jums ir jāapgūst RxJs. Arī šajā gadījumā tas var būt diezgan apgrūtinoši, lai jau pašā sākumā apgūtu šo abstrakto konstrukciju un justos pazīstams ar to.

Jūs varat izmantot Axios, ja vēlaties to darīt, bet, kā teikts Axios GitHub lapā: "Axios ir lielā mērā iedvesmojies no $htttp pakalpojuma, kas sniegts Angular'

privāts 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) => {
        // apstrādāt kļūdu
})
)
.subscribe((result: ResultType[])
    //galīgā operācija ar doto rezultātu
)
}

Rezumējot

| Vue | Angular |
| ———– | ———– |
| Nepieprasa ievērot ļoti stingrus noteikumus | Nepieciešams izmantot Typescript, uz klasēm balstītus komponentus/pakalpojumus |
| Plaša mācību līkne, viegli sākt | Augsta mācību līkne (Typescript, RxJs, atkarību iejaukšana) |
| Projekta iestatīšanas laikā jākonfigurē daudz lietu| Nav daudz ko iestatīt, bet tas ļauj jums ģenerēt projekta struktūru, izmantojot konsoli |
| Kopienas virzīta sistēma, kas balstīta uz Angular un React | Izveido un uztur Google |
| Nav daudz kas iekļauts, nepieciešams instalēt ārējās bibliotēkas| Valsts pārvaldība, HttpClient iekļauts sistēmā |

Lasīt vairāk:

JavaScript ir pilnībā miris. Kāds puisis internetā

GraphQL/MongoDB API izvēršana, izmantojot Netlify funkcijas

Kā nogalināt projektu ar sliktu kodēšanas praksi