Porównanie mistrzów: Angular vs Vue

Konfigurowanie projektu

Najszybszy sposób na rozpoczęcie projekt jest użycie CLI dostarczone przez autorów frameworków. Oba oferują całkiem dobrą obsługę; jednak istnieje kilka różnic, tj, Vue oferuje więcej opcji, dzięki czemu można dostosować projekt do swoich potrzeb od samego początku. Możesz wybrać Wersja Vueczy konieczne jest korzystanie z routingu. Maszynopis, preprocesory CSS lub skonfigurować linter. Pozwala również zdecydować, czy chcesz skonfigurować testy (jednostkowe lub E2E).

Angular jest wyposażony w generator, który umożliwia tworzenie komponentów, usług, interfejsów i dyrektyw bezpośrednio z konsoli, co z mojego doświadczenia jest bardzo przydatne, ponieważ nie ma potrzeby ręcznego konfigurowania folderów, plików i zbędnych elementów. kod ręcznie, zwłaszcza gdy używasz np. wzorca MVC. Typescript jest dostarczany z pudełka z Angular i niejako naciska, by z niego skorzystać. Jeśli jeszcze tego nie zrobiłeś, oto przydatne wprowadzenie, dlaczego powinieneś to wypróbować - możesz to sprawdzić tutaj.

Na początku, CLI Angular pyta tylko o routing lub preferowane preprocesory CSS, które w porównaniu do Vuenie pozostawia wiele miejsca na decydowanie o strukturze i stylu aplikacji. Ale jeśli zamierzasz podążać za konwencją, o którą cię prosi, CLI poprowadzi cię przez całą drogę.

Struktura projektu

Vue wykorzystuje SFC (Single File Components), co sprawia, że dla nowego programisty rozpoczęcie korzystania z frameworka i odnalezienie się w kodzie jest dość proste.

Dyrektywy

Vue jest również dostarczany po wyjęciu z pudełka z dyrektywami takimi jak `v-if, v-for`, które są bardzo intuicyjne w użyciu, ponieważ jest to prawie kopia Angular te. Vue używa tej samej konwencji dla dwukierunkowych dane (wystarczy przedrostek v- w `v-model`) i dodanie @/v-on wskazującego, że na coś reagujemy. Angular oddziela to, wskazując, w którą stronę idziemy, używając nawiasów dla wiązania zdarzeń i nawiasów kwadratowych dla wiązania właściwości, tj. `(change), [ngStyle], [(ngModel)]`.

W VueSama struktura jest prosta, nie ma potrzeby tworzenia oddzielnych plików dla arkuszy stylów i logiki, więc wszystko jest uporządkowane i przystępne. Oczywiście, Vue zawiera przewodnik po stylach, w którym można znaleźć zalecane zasady, których należy przestrzegać podczas tworzenia projektu; jednak tylko kilka z nich jest obowiązkowych. 

Wydarzenia

W tym przypadku, Vue przychodzi ponownie z bardziej poręcznym rozwiązaniem; mianowicie, aby wyemitować zdarzenie z komponentu podrzędnego do jego rodzica, wystarczy (używając Vue 3 Skład API ) pobiera metodę z obiektu kontekstowego w konfiguracji i po prostu emituje to, czego w danej chwili potrzebujesz:

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

Można to również zrobić bezpośrednio w szablonie jako odpowiedź na inne zdarzenie.

W Angular, należy najpierw zdefiniować EventEmitter w następujący sposób:

@Output() customNameForYourEmitter = new EventEmitter();

Następnie należy wywołać metodę emitującą na EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Wyświetlanie slotów/treści

W obu frameworkach można łatwo przenieść zawartość (zarówno pojedynczą, jak i wielokrotną) z komponentu nadrzędnego do jego elementu podrzędnego, po prostu dodając dodatkowy html wewnątrz tagów podrzędnych, z niewielkimi różnicami:

Vue:

`` 

Angular:

Domyślnie:
    .

Nazwany slot:
    .

<p yourname>
   Jest to nazwane gniazdo
  </p>
  <p>Jest to slot domyślny</p>

Jeśli jednak chcesz warunkowo renderować niektóre części aplikacji, Vue jest bardziej intuicyjna niż Angular i pozwala zrobić to szybciej poprzez dodanie funkcji v-if do dyrektywy <template> który umożliwia renderowanie tylko tych części, które są aktualnie potrzebne.

Podczas gdy ng-content jest zawsze renderowana, należy w tym przypadku użyć funkcji ng-template, a następnie utworzyć własną dyrektywę niestandardową:

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

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

i z powodu imienia, które nadałeś swojemu ng-template Angular będzie wiedział, co powinno zostać wyrenderowane:

Ponadto w ramach komponentu należy wyświetlić szablon, który ma być używany w aplikacji @ContentChild aby uzyskać odpowiedni szablon:

@ContentChild(CustomDirective) content!: CustomDirective;

Usługa a sklep

Angular w swoim rdzeniu zachęca do korzystania z wzorca projektowego MVC, w którym można używać usług dla modelu. Z tego powodu musisz nauczyć się wzorca wstrzykiwania zależności, aby swobodnie operować danymi w swojej aplikacji. Pozwala on oddzielić efekty uboczne wywołań API i korzystać z tej samej logiki w całym projekcie, wstrzykując te części, które są potrzebne w danym momencie, co czyni go również podejściem modułowym.

Angular jest również dostarczany z frameworkiem Ngrx/store opartym na Redux w przypadku, gdy chcesz zastosować bardziej reaktywne podejście z obserwowalnymi elementami RxJs. Zawiera on Akcje, które są używane do wysyłania unikalnych zdarzeń z komponentów i/lub usług, Efekty, które obsługują efekty uboczne lub działania asynchroniczne, które chcesz wykonać oraz Reduktory, które mutują twój stan.

W VuePopularnym podejściem jest użycie biblioteki Vuex do zarządzania stanem, która zawiera również narzędzia takie jak Actions, Mutations i Getters, podobnie jak Ngrx/store, aby pomóc w zarządzaniu i organizowaniu stanu aplikacji. Można je modularyzować, ustawiając różne sklepy dla widoków, np. sklep użytkownika lub sklep koszyka, ale może to prowadzić do problemów z odstępami między nazwami, chyba że użyjesz funkcji namespaced: true w deklaracji sklepu.

Oto porównanie podejścia opartego na usługach i podejścia Vuex, gdy zadaniem jest pobranie niektórych produkt dane dla Twojego sklepu:

@Injectable() // dekorator wskazujący, że chcemy go później użyć w DI
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //zrób cokolwiek chcesz ze swoimi produktami
    });
    return this.products;
  }
}

Następnie w komponencie wstrzykujemy naszą usługę, która ma być używana:
constructor(private service: HeroService) { }

W Vue, po prostu wysyłamy akcję, która wywołuje backend dla my:

store.dispatch(getAllProducts)

i w actions.ts definiujemy działanie:

działania: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // pobierz dane i umieść wyniki w sklepie
}}

Pobieranie danych

Z VueMożesz użyć Axios/Fetch lub innej biblioteki, której chcesz użyć, jest to naprawdę proste - po prostu obsługujesz asynchroniczne wywołania za pomocą obietnic lub innego podejścia, które najbardziej Ci odpowiada.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed'))
} catch (e) {
    /obsługa błędu
}

Angular jest dostarczany z biblioteką HttpClient, która wykorzystuje obserwowalne elementy, co prowadzi do kolejnej korzyści - aby używać go poprawnie i / lub manipulować danymi, musisz nauczyć się RxJs. Ponownie, uzyskanie płynności i zaznajomienie się z tą abstrakcyjną konstrukcją na samym początku może być dość przytłaczające.

Możesz użyć Axios, jeśli tego właśnie chcesz, ale jak mówi strona Axios GitHub: "Axios jest silnie inspirowany usługą $http dostarczoną w Angular'

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) => {
        //obsługa błędu
})
)
.subscribe((result: ResultType[])
    //ostateczna operacja na podanych danych wyjściowych
)
}

Podsumowanie

| Vue | Angular |
| ---- | ---- |
| Nie zmusza do przestrzegania bardzo rygorystycznych zasad | Wymaga użycia Typescript, komponentów/usług opartych na klasach |
| Płaska krzywa uczenia się, łatwa do rozpoczęcia | Wysoka krzywa uczenia się (Typescript, RxJs, Dependency Injection) |
| Wiele rzeczy do skonfigurowania podczas konfiguracji projektu | Niewiele do ustawienia z góry, ale pozwala wygenerować strukturę projektu za pomocą konsoli |
| Społecznościowe ramy oparte zarówno na Angular, jak i React | Stworzone i utrzymywane przez Google.
| Niewiele jest dołączonych, trzeba zainstalować zewnętrzne biblioteki| Zarządzanie stanem, HttpClient dołączony do frameworka |